VUE+elementui面包屑实现动态路由详解

我的路由：

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面包屑实现动态路由详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。