Vue面包屑导航实现方案
面包屑导航实现1、给路由文件添加meta标签,meta的title必须和你想要展示的标题一致{path: '/layout',component: Layout,// redirect: '/home'//重定向 防止页面进来空白默认选中侧边栏上的文字children: [{path: '/center',name: 'C
·
面包屑导航实现
1、给路由文件添加meta标签,meta的title必须和你想要展示的标题一致
{
path: '/layout',
component: Layout,
// redirect: '/home' //重定向 防止页面进来空白 默认选中侧边栏上的文字
children: [
{
path: '/center',
name: 'Center',
meta: {title: '个人中心'},
component: () => import('../views/Center.vue')
},
{
path: '/usermanages',
name: 'Usermanages',
meta: {title: '用户管理'},
component: () => import('../views/Usermanages.vue')
},
{
path: '/taskmanages',
name: 'Taskmanages',
meta: {title: '任务管理'},
component: () => import('../views/Taskmanages.vue'),
children: [
{
path: '/taskmanages/urgenttask',
name: 'Urgenttask',
meta: {title: '紧急任务'},
component: () => import('../views/Urgenttask.vue')
},
{
path: '/taskmanages/commontask',
name: 'Commontask',
meta: {title: '普通任务'},
component: () => import('../views/Commontask.vue')
}
]
},
]
},
2、在面包屑组件处理逻辑(必须监听,不然无法实时随着路径的改变而改变)
<!--面包屑-->
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item,index) in lists" :key="item.path"> 遍历路由信息并展示
<router-link :to="item.path">{{item.meta.title}}</router-link>
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
name: "Breadcrumb",
data(){
return{
lists:[] //定义一个数组 用于接收路由信息
}
},
created() {
console.log(this.$route.matched)
this.lists = this.$route.matched //获取路由内的全部信息
},
//这里必须使用监听,否则无法实时获取路由变动信息。
监听后路由会实时变动,不然需要手动刷新路径才会改变
watch:{
$route(to,from) {
console.log(to)
this.lists = to.matched
}
},
}
</script>
今天的分享就这些,欢迎大家相互交流,共同进步。
更多推荐
已为社区贡献8条内容
所有评论(0)