vue element-ui实现动态面包屑导航
微信(小程序)  /  管理员 发布于 2年前   529
vue element-ui动态面包屑导航,供大家参考,具体内容如下 直接上代码 一、template代码 二、script代码 三、css代码 css样式是放在一个单独的样式文件夹里面 以上就是面包屑的制作过程了。 关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。 更多vue学习教程请阅读专题《vue实战教程》 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。// 这是单独的组件
export default { // 初始化数据对象 data() { return { breadList: [] }; }, // 监听属性 watch: { // 监听路由 $route(val) { // 调用获取路由数组方法 this.getBreadList(val); } }, // 自定义事件 methods: { /** * @description 获取路由数组 * @params val 路由参数 * @author tw */ getBreadList(val) { // 过滤路由matched对象 if (val.matched) { let matched = val.matched.filter(item => item.meta && item.meta.title); // 拿到过滤好的路由v-for遍历出来 this.breadList = matched; } } }}
/* 面包屑导航 */.el-breadcrumb { @include ptrbl(16px,16px,16px,16px); box-sizing: border-box; background: $white; border-bottom: 1px solid #EEE;}
您可能感兴趣的文章:
阿凡达123 在
golang 怎么做热更新中评论 也可以看看这个:https://github.com/edwingeng/hot..博主 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..GGGGGGGGG 在
layui框架常用输入框介绍中评论 写的很好解决问题..路过的靓仔 在
hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..激光豆芽 在
为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号