面包屑导航的实现

面包屑导航的实现

记录下做面包屑导航的思路

1. 更改路由，给路由配置meta属性添加对象

{path: '/store', meta: { title: '店铺管理' }, component: () => import('@/views/home/Layerout.vue’)}

2. 封装函数，获取路径和名字

1. 准备一个变量用来装路径和导航名字

navArr: [] //面包屑导航所需数组

2. 封装渲染面包屑导航函数

renderHead() {
      // 筛选出具有meta属性的路由
      let arr = this.$route.matched.filter(v => v.meta.title);
      //   将获取的数组转换为所需数组，给navArr赋值
      this.navArr = arr.map(v => {
        return { name: v.meta.title, path: v.path };
      });
}

3. 标签根据navArr数组来渲染

1. 使用v-for渲染，有多少元素就创建多少标签。

<el-breadcrumb-item v-for="(v, i) in navArr" :key="i" :to="v.path">{{ v.name }}</el-breadcrumb-item>

4. 调用

1. 路径发生改变时渲染面包屑导航

watch: {
    // 路径改变时渲染面包屑。
    "$route.path"() {
      this.renderHead();
    }
}

2. 创建页面时渲染

created() {
    // 创建时渲染面包屑
    this.renderHead();
  },