Vue面包屑导航实现方案
面包屑导航实现1、给路由文件添加meta标签,meta里的title是你想要展示在页面上的,必须和展示的内容一致。{path: '/',component:Home,// redirect: '/home'//重定向 防止页面进来空白默认选中侧边栏上的文字children: [{path: '/myfile',name:
·
面包屑导航实现
1、给路由文件添加meta标签,meta里的title是你想要展示在页面上的,必须和展示的内容一致。
{
path: '/',
component: Home,
// redirect: '/home' //重定向 防止页面进来空白 默认选中侧边栏上的文字
children: [
{
path: '/myfile',
name: 'MyFile',
meta: {title: '个人中心'},
component: () => import('../views/MyFile.vue')
},
{
path: '/user',
name: 'User',
meta: {title: '用户管理'},
component: () => import('../views/User.vue')
},
{
path: '/target',
name: ' Target',
meta: {title: '任务管理'},
component: () => import('../views/Target.vue'),
children: [
{
path: '/target/dangers',
name: 'Dangers',
meta: {title: '紧急任务'},
component: () => import('../views/Dangers.vue')
},
{
path: '/target/normal',
name: 'Normal',
meta: {title: '普通任务'},
component: () => import('../views/Normal.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>
更多推荐
已为社区贡献2条内容
所有评论(0)