蝙蝠岛资源网 Design By www.hbtsch.com

我的路由:

const routerMap = [
  {
    path: '/',
    redirect: 'dashboard',
    component: Layout,
    name:'Dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/view/dashboard'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
      }
    ]
  },{
    path:'/test',
    component:Layout,
    redirect: '/test/index',
    name:'Test',
    meta:{title:'test',icon:'lock'},
    children:[
      {
        path:'index',
        component:()=>import('@/view/test'),
        name:'test',
        meta:{title:'test', icon: 'example', noCache: true }
      },{
        path:'example',
        component:()=>import('@/view/test/example'),
        name:'example',
        meta:{title:'example',icon:'404'}
      }
    ]
  }
]

面包屑代码:

<template>
  <div class="navbar clearfix">
    <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in levelList":key="item.path" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: 'Navbar',
    data() {
      return {
        levelList: []
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb()
      }
    },
    created(){
      this.getBreadcrumb()
    },
    methods:{
      getBreadcrumb() {
        let matched = this.$route.matched.filter(item => item.name)
        const first = matched[0];
        if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
          matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
        }
        this.levelList = matched
      }
    }
  }
</script>

原理:通过监听当前路由的变化,动态更新面包屑的内容。

以上这篇VUE+elementui面包屑实现动态路由详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
VUE,elementui,面包屑,动态路由

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“VUE+elementui面包屑实现动态路由详解”

暂无VUE+elementui面包屑实现动态路由详解的评论...