我的路由:
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面包屑实现动态路由详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]