前言

最近在工作中遇到了一個問題，是關于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代碼：