const routerMap = [ { path: 'https://www.jb51.net/', 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> <el-breadcrumb 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面包屑实现动态路由详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: