vue動態路由多級巢狀麵包屑怎麼弄(不是動態路由巢狀可以嘗試用 this.$route.matched方法獲取到path和name集合，動態的巢狀獲取不到全部具體的id)
功能比如：A列表頁面路由如/a，點選任意一列進入任意一個A的詳情頁面名字為B,/b/03（這個是動態路由弄是吧,03就是id嘛），點選B頁面任意一列，再進入B的詳情頁名字為C,路由如/bdetail/01;現在弄麵包屑要獲取到的路由是剛剛開啟的，如（/a；/b/03；/bdetail/01）
思路：獲取所有進入的層級的路由和名稱如breadlist=[{path:`/a`,name:`一級`},{path:`/b/03`,name:`二級`},{path:`/bdetail/01`,name:`三級`}]，然後遍歷出來如：<span v-for=”(item in breadlist)”><router-link :to=”item.path”>{{item.name}}</router-link></span>
做法：下面貼出相關程式碼：
A列表頁面跳轉按鈕：（breadNum記錄麵包屑層級）
<router-link :to="{path:`/b/`+id,query:{breadNum:2}}"></router-link>
B列表頁面跳轉按鈕：
<router-link :to="{path:`/bbdetail/`+id,query:{breadNum:3}}"></router-link>
breadcrumb.vue頁面：
<template>
<div class="breadbox">
<span v-for="(item,index) in breadlist" >
<router-link :to="item.path">{{item.name}}</router-link>
</span>
</div>
</template>
<script>
export default{
created() {
this.getBreadcrumb();
},
data() {
return {
breadlist: `` // 路由集合
}
},
methods: {
getBreadcrumb() {
var breadNumber= this.$route.query.breadNum || 1;//url變數breadNum記錄層級，預設為1，如果大於1，要新增上變數；
var breadLength=this.$store.state.breadListState.length;//目前breadlist集合陣列個數
var curName=this.$route.name;
var curPath=this.$route.fullPath;
var newBread={name:curName,path:curPath};
var ishome=curName==`首頁`;
console.log(ishome);
if(breadNumber===1){//點選一級選單
this.$store.commit(`breadListStateRemove`,1);//初始化，只有首頁面包屑按鈕
if(!ishome)//如果不是首頁
this.$store.commit(`breadListStateAdd`,newBread);//當前頁面新增到breadlist集合
}
else if(breadLength<=breadNumber){//如果不是一級導航，並且breadlist集合個數等於或者小於目前層級
this.$store.commit(`breadListStateAdd`,newBread);//要把當前路由新增到breadlist集合
}else{
this.$store.commit(`breadListStateRemove`,parseInt(breadNumber)+1);//如果往回點麵包屑導航，擷取；
}
this.breadlist=this.$store.state.breadListState;
console.log(this.breadlist);
}
},
watch: {
$route () {
this.getBreadcrumb();
}
},
}
</script>狀態管理store.js程式碼：
export default store = new Vuex.Store({
state: {
breadListState:[
{name:`首頁`,path:`/`}
]
},
mutations: {
breadListStateAdd(state,obj){
state.breadListState.push(obj);
},
breadListStateRemove(state,num){
state.breadListState=state.breadListState.slice(0,num);
}
}
})
路由route.js程式碼：
{
path: `/`,
name: `首頁`,
component: Main,
redirect:`/home`,
children:[
{path: `/a`,name: `A頁面`,component: APage},
{path: `/b/:id`,name: `B頁面`,component: BPage},
{path: `/bdetail/:id`,name: `C頁面`,component: CPage},
]
} 建議後修改：（貼出程式碼幫我看看）
A列表頁面跳轉按鈕：（breadNum記錄麵包屑層級）
<router-link :to="{path:`/b/`+id}"></router-link>
B列表頁面跳轉按鈕：
<router-link :to="{path:`/bbdetail/`+id}"></router-link>breadcrumb.vue頁面：
<template>
<div class="breadbox">
<span v-for="(item,index) in breadlist" >
<router-link :to="item.path">{{item.name}}</router-link>
</span>
</div>
</template>
<script>
export default{
created() {
this.getBreadcrumb(true);//重新整理的引數為true
},
data() {
return {
breadlist: `` // 路由集合
}
},
methods: {
getBreadcrumb(isreload) {
console.log(`getBreadcrumb`)
var breadNumber= typeof(this.$route.meta.breadNumber)!="undefined"?this.$route.meta.breadNumber:1;//麵包屑位置索引放到meta裡預設好，首頁索引為0，一級預設為1
var breadLength=this.$store.state.breadListState.length;//目前breadlist集合陣列個數
var curName=this.$route.name;
var curPath=this.$route.fullPath;
var newBread={name:curName,path:curPath};
this.$store.commit(`increment`);
if(breadNumber===0||breadNumber===1){//點選首頁或者一級
this.$store.commit(`breadListStateRemove`,1);//初始化，只有首頁面包屑按鈕
if(breadNumber===1){//點選一級選單
this.$store.commit(`breadListStateAdd`,newBread);//當前頁面新增到breadlist集合
}
}else{
if(!isreload){
if(breadLength<=breadNumber){//breadlist集合個數等於或者小於目前層級breadNumber
this.$store.commit(`breadListStateAdd`,newBread);//要把當前路由新增到breadlist集合
}else{
this.$store.commit(`breadListStateRemove`,parseInt(breadNumber)+1);//如果往回點麵包屑導航，擷取；
}
}else{//重新整理，state.breadListState被初始化，從快取取值；
this.$store.state.breadListState=JSON.parse(sessionStorage.getItem(`breadListStorage`));
}
}
this.breadlist=this.$store.state.breadListState;
sessionStorage.setItem(`breadListStorage`,JSON.stringify(this.breadlist))
}
},
watch: {
$route () {
this.getBreadcrumb();
}
},
}
</script>狀態管理store.js程式碼：
export default store = new Vuex.Store({
state: {
breadListState:[
{name:`首頁`,path:`/`}
]
},
mutations: {
breadListStateAdd(state,obj){
state.breadListState.push(obj);
},
breadListStateRemove(state,num){
state.breadListState.splice(num,state.breadListState.length-num);
}
}
})
路由route.js程式碼：
{
path: `/`,
name: `首頁`,
component: Main,
redirect:`/home`,
children:[
{path: `/a`,name: `A頁面`,component: APage},
{path: `/b/:id`,name: `B頁面`,component: BPage,meta:{breadNumber:2}},
{path: `/bdetail/:id`,name: `C頁面`,component: CPage,meta:{breadNumber:3}},
]
} ===================================================貼下程式碼======================：
store.js
mutations: {
breadListMutations(getters,list){
getters.breadListState=list;
sessionStorage.setItem(`breadListStorage`,list);
}
},
getters:{
breadListState(){
return JSON.parse(sessionStorage.getItem(`breadListStorage`)) || [];
}
}breadcrumb.vue元件
<template>//樣式自己寫，我用了elementUI
<div class="m-artHeader">
<el-breadcrumb class="linkWay">
<el-breadcrumb-item v-for="(item,index) in breadList" :key="item.id" separator="/" :to="{ path: item.path }">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default{
created() {
this.getBreadcrumb();
},
data() {
return {
breadList: [] // 路由集合
}
},
methods: {
getBreadcrumb() {
var breadNumber= typeof(this.$route.meta.breadNumber)!="undefined"?this.$route.meta.breadNumber:1;//預設為1
var newBread={name:this.$route.name,path:this.$route.fullPath};//當前頁面的
var breadList=this.$store.getters.breadListState;//獲取breadList陣列
breadList.splice(breadNumber,breadList.length-breadNumber,newBread);
var breadList=JSON.stringify(breadList);
this.$store.commit(`breadListMutations`,breadList);
this.breadList=this.$store.getters.breadListState;
}
},
watch: {
//"$route": "getBreadcrumb"
$route () {
this.getBreadcrumb();
}
},
}
</script>頁面中引用：
<template>
<bread-crumb></bread-crumb>
</template>
<script>
import breadCrumb from `../components/breadcrumb.vue`
export default {
components:{
breadCrumb
}
}
</script>