面包屑实现 vue

面包屑有两种：一种是不带动态参数，一种是需要携带动态参数跳转的
一，不带动态参数：
1，通过路由元meta实现，在每个需要面包屑的页面路由中固定写好
如：
router.js

const router = new Router({
 routes: [{
   path: '/test',
   name: 'test',
   component: test,
   meta: {
    breadList: [{
      name: "首页",
      path: "/home"
     }, {
      name: "系统设置",
      path: "/setting"
     }, {
      name: "用户管理",
      path: "/setting/usermanage"
     }]
   }
  }
 ]
});
export default router;

然后我们直接在面包屑组件中使用计算属性获取数据。

<template>
 //...省略
</template>
<script>
export default {
 name: "breadcrumb",
 computed: {
  breadList() {
   return this.$route.meta.breadList || [];
  }
 }
};
</script>

2.利用路由对象 matched 属性实现
matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录 。
路由配置:

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/home'
  },
  {
   path: '/home',
   name: 'home',
   component: Home,
   meta: { title: '首页' }
  },
  {
   path: '/system',
   name: "system",
   component: () => import('./views/system/system.vue'),
   redirect: '/system/user',
   meta: { title: '系统管理' },
   children: [{
    path: 'user',
    component: () => import('./views/system/UserMange.vue'),
    name: 'usermanage',
    meta: { title: '用户管理' }
   }, {
    path: 'message',
    component: () => import('./views/system/MesMange.vue'),
    name: 'mesmanage',
    meta: { title: '短信管理' }
   }]
  }
 ]
});
export default router;

面包屑组件：

//Breadcrumb.vue
<script>
export default {
 data() {
  return {
   breadList: [] // 路由集合
  };
 },
 watch: {
  $route() {
   this.getBreadcrumb();
  }
 },
 methods: {
  isHome(route) {
   return route.name === "home";
  },
  getBreadcrumb() {
   let matched = this.$route.matched;
   //如果不是首页
   if (matched[0].name!=='home') {
    matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
   }
   this.breadList = matched;
  }
 },
 created() {
  this.getBreadcrumb();
 }
};
</script>

二，携带动态参数
1，需要携带动态参数，那么就必须在路由变化时记录fullPath，
2，并要保证刷新时数据依然存在就要做缓存，这里缓存到sessionStorage
router.js

//a>b>c  都有动态id
//breadNumber 面包屑层级
{
    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

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

可以参考vue面包屑（vue动态路由多级嵌套面包屑怎么弄）里面讲解比较详细,本文的动态参数面包屑参考此文