vue麪包屑（vue動態路由多級嵌套麪包屑怎麼弄）

時間 2019-11-05

原文原文鏈接

vue動態路由多級嵌套麪包屑怎麼弄(不是動態路由嵌套能夠嘗試用 this.$route.matched方法獲取到path和name集合，動態的嵌套獲取不到所有具體的id)vue

功能好比：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>緩存

作法：下面貼出相關代碼：session

A列表頁面跳轉按鈕：（breadNum記錄麪包屑層級）this

<router-link :to="{path:'/b/'+id,query:{breadNum:2}}"></router-link>

B列表頁面跳轉按鈕：url

<router-link :to="{path:'/bbdetail/'+id,query:{breadNum:3}}"></router-link>

breadcrumb.vue頁面：spa

<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代碼：code

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代碼：component

{
    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

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。