(相关资料图)

效果

面包屑用于显示当前页面的路径，快速返回之前的任意页面。

一、路由配置

代码如下：

import Vue from "vue"import VueRouter from "vue-router"Vue.use(VueRouter)const VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(to) {  return VueRouterPush.call(this, to).catch(err => err)}const routes = [  {     path: "/",     component: ()=>import("@/views/LoginView")   },  {     path: "/login",     name: "login",    component: ()=>import("@/views/LoginView"),  },  {    path: "/home",    name:"home",    component: ()=>import("@/views/HomeView"),    meta:{      title:"首页",      path:"/home"    },    children: [      { //主页        path: "/home",         component: ()=>import("@/views/main/MainView"),        meta:{          title:"",          path:"/home"        }      },       { //个人信息        path: "userinfo",         component: ()=>import("@/views/userinfo/UserInfo"),         meta:{          title:"个人中心",          path:"/userinfo"        }      },        { //分析页        path: "analyse",         component: ()=>import("@/views/Analyse"),        meta:{          title:"分析页",          path:"/analyse"        }      },      ]  }]const router = new VueRouter({  routes})export default router

这里使用了router的meta属性，为其设置名为title的属性，用来当作面包屑的展示名称，当然，也可以直接使用路由的name属性。

二、使用步骤

1.Breadcrumb.vue：

代码如下：

<script>export default {  data() {    return {      breadList: [],    };  },  watch: {    $route() {//监听$route      this.getBreadcrumb();    },  },  methods: {    isHome(route) {      return route.name === "home";    },    getBreadcrumb() {      let matched = this.$route.matched;      //如果不是首页      if (!this.isHome(matched[0])) {        matched = [].concat(matched);      }      this.breadList = matched;    },  },  created() {    //生命周期中调用获取数据的方法    this.getBreadcrumb();  },};</script>

2.在页面中使用

代码如下：

<script>// 导入ScreenFull组件，控制全屏import FullScroll from "@/components/Header/ScreenFull.vue"// 导入头像组件import Avatar from "@/components/Header/AvatarHeader.vue"// 导入面包屑import BreadVue from "../components/Bread.vue"export default {  components: {    FullScroll,    Avatar,    BreadVue  },  data(){    return{      breadList:null,    }  },}</script>

总结

文件目录

vue-router和breadcrumb面包屑结合，实现展示当前路径下的路由信息。关键是利用route对象的matched属性，得到前匹配的路径中所包含的所有片段所对应的配置参数对象数组，然后遍历数组，并利用数组中对象的信息，展示到面包屑中。每个对象的path属性为其对应的路由路径，meta属性为其元数据对象。