面包屑導航實作
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>
今天的分享就這些,歡迎大家互相交流,共同進步。