阅读 33

Vue实现动态面包屑

1.使用elementui 组件中的 el-breadcrumb

  • v-for遍历路径的数组
  • 利用router.meta 添加title 、 path
 <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item , index) in breadList" :key="item.index" :to="                {path:item.meta.path}" >
              </el-breadcrumb-item>
</el-breadcrumb>
复制代码

2.利用vue-router对象属性 $route.matched

  • 类型:Array<RouteRecord>
  • 一个数组 包含当前路由的所有嵌套路径的路由记录
// 建立一个数组 存放面包屑的路径
data(){
    return{
        breadList:[]
      }
    },
    
// 监听路由变化 并且把路由路径放置数组中
watch:{
 $route(){
    this.getBreadcrumb();
 }
}
methods:{
    getBreadcrumb(){
            let matched = this.$route.matched;
            this.breadList=matched;
        }
}
// 初始化
created(){
    this.getBreadcrumb()
}
​
复制代码

3. router.js 中进行路由的元信息配置 meta

  • 子路由只需配置 meta:{title: 'title'}
  • 父路由 、 父父路由配置path跳转 meta: {title: 'title' , path:'path'},
  // 业务管理
        // 业务管理主页
      {
        path: '/configManage/businessManage',
        name:'businessManage',
        component: BusinessManage,
        meta: {title: '业务管理主页' , path:'/configManage/businessManage'},
        children:[
            // 业务增加
          {
            path:'/configManage/businessAdd',
            name:'businessAdd',
            component:BusinessAdd,
            meta:{title: '业务增加'},
          },
            // 业务编辑
          {
            path:'/configManage/businessEdit',
            name:'businessEdit',
            component:BusinessEdit,
            meta: {title: '业务编辑'}
          },
            // 业务查看
          {
            path:'/configManage/businessView',
            name:'businessView',
            component:BusinessView,
            meta: {title: '业务查看'}
          }
        ]
复制代码

\

文章分类
前端
文章标签