1.使用elementui 组件中的 el-breadcrumb
v-for遍历路径的数组- 利用
router.meta添加title 、 path
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item , index) in breadList" :key="item.index" :to=" {path:item.meta.path}" >
</el-breadcrumb-item>
</el-breadcrumb>
2.利用vue-router对象属性 $route.matched
- 类型：
Array<RouteRecord> - 一个数组 包含当前路由的所有嵌套路径的路由记录
// 建立一个数组 存放面包屑的路径
data(){
return{
breadList:[]
}
},
// 监听路由变化 并且把路由路径放置数组中
watch:{
$route(){
this.getBreadcrumb();
}
}
methods:{
getBreadcrumb(){
let matched = this.$route.matched;
this.breadList=matched;
}
}
// 初始化
created(){
this.getBreadcrumb()
}
3. router.js 中进行路由的元信息配置 meta
- 子路由只需配置
meta:{title: 'title'} - 父路由 、 父父路由配置
path跳转meta: {title: 'title' , path:'path'},
// 业务管理
// 业务管理主页
{
path: '/configManage/businessManage',
name:'businessManage',
component: BusinessManage,
meta: {title: '业务管理主页' , path:'/configManage/businessManage'},
children:[
// 业务增加
{
path:'/configManage/businessAdd',
name:'businessAdd',
component:BusinessAdd,
meta:{title: '业务增加'},
},
// 业务编辑
{
path:'/configManage/businessEdit',
name:'businessEdit',
component:BusinessEdit,
meta: {title: '业务编辑'}
},
// 业务查看
{
path:'/configManage/businessView',
name:'businessView',
component:BusinessView,
meta: {title: '业务查看'}
}
]
\
