My route:
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'} } ] } ]
Breadcrumb code:
<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="" :to="">{{}}</el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> export default { name: 'Navbar', data() { return { levelList: [] } }, watch: { $route() { () } }, created(){ () }, methods:{ getBreadcrumb() { let matched = this.$(item => ) const first = matched[0]; if (first && ().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) { matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched) } = matched } } } </script>
principle:Dynamically update the content of breadcrumbs by listening for changes in the current route.
The above detailed explanation of the dynamic routing of VUE+elementui breadcrumbs is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.