1597826193922.jpg

在 route 中配置 meta 属性，并给 meta 属性赋值

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "views/Home.vue";

Vue.use(VueRouter)

/**
 * 使用递归来保证多层children的情况能够被遍历
 */
function recursion(routes) {
  let routeArr = routes.map(route => {
    if (!route.component) {
      let url = route.url;
      route = {
        path: route.path,
        name: route.name,
        component: () => import( /* webpackChunkName: "[request]" */ `views/${url}.vue`),
        meta: route.meta
      };
    }
    if (route.children) {
      route.children = recursion(route.children);
    }
    return route;
  });
  return routeArr;
}

/**
 * @param {String} path: 路由路径
 * @param {String} name: 路由名称
 * @param {Any} component: 非懒加载页面
 * @param {Array} children: 子路由
 * @param {String} url: 懒加载页面地址
 */
let routerConfig = [{
  path: "/",
  name: "home",
  component: Home
}, {
  path: "/breadCrumd",
  name: 'breadCrumd',
  url: 'breadCrumd',
  meta: {
    title: '面包屑',
    breadCrumd: [{
        path: '/',
        name: '首页'
      },
      {
        path: '/breadCrumd',
        name: '面包屑'
      }
    ]
  }
}];

let routes = recursion(routerConfig);

const router = new VueRouter({
  base: process.env.VUE_APP_PUBLICPATH,
  saveScrollPosition: true,
  mode: 'history',
  routes
})

//能避免如蜜传如蜜导致错误
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router

<template>
  <div class="about">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in pathArr" :key="index"
        ><a :href="item.path">{{ item.name }}</a></a-breadcrumb-item
      >
    </a-breadcrumb>
  </div>
</template>

<script>
  export default {
    data: () => ({
      pathArr: [],
    }),
    created() {
      //取出meta中存储的面包屑信息
      this.pathArr = this.$route.meta.breadCrumd;
    },
  };
</script>