vue实现面包屑

时间:2022-05-28 栿志人气:0

vue中面包屑的实现方法，供大家参考，具体内容如下

面包屑是什么：

面包屑是作为辅助和补充的导航方式（secondary navigation scheme），它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。
最常见的面包屑的样式是：横向的文字链接，由大于号“>”分开，这个符号也暗示了它们的层级关系

实现原理：

1.在router配置中加入meta(元数据)对象，存放一些自定义的内容。例如在面包屑的实现中加入title变量，这个变量则是面包屑展示出来的多级标题。

2.在用到面包屑的页面中调用watch监听，监听route的变化，用this.$route.matched获取到匹配当前路由的所有片段的配置参数对象，返回一个数组，存到list中

3.用v-for 遍历li标签，将list.meta.title作为router-link的{标题信息}，:to=“list.path”，将list信息动态渲染到面包屑上

具体的代码演示

面包屑组件：

breadcrumb.vue

<template>
    <div class="breadcumb">
        <ul>
          <li v-for="(v,i) in lists" :key="i">
            <router-link :to="{path:v.path}">{{v.meta.title}}</router-link>
            <span v-if="i<lists.length-1">/</span>
          </li>
        </ul>
      </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
      lists:[]
    }
  },

  //监听路由变化
  watch:{
    $route(to,from){
      let matched = to.matched;   //this.$route.matched
      //这个地方是为了固定第一级目录是首页不变
      if(matched.length && matched[0].name!=="home"){
        matched = [{ path: '/home',name: 'home',meta:{title:'首页'}},...matched];
      }
      ...数组名 是一种追加数组的方法
      var arr = [1,2,3]
      var arr1 = [4,5]
      var arr2 = [2,...arr1] == [2,4,5]
      //
      this.lists = matched;
    }
  }
}
</script>

配置路由文件：

router/index.js

{
    path: '/list',
    name: 'list',
    meta:{title:'列表展示'},
    component: () => import('../views/list/index.vue'),
    children:[{      //二级路由
          //path:'testA',    
          path:'/list/testA',  
          name:'testA',
          meta:{title:'子列表A'},
          component: () => import('../views/list/part1.vue')
        },
        {
          path:'testB',   
          name:'testB',
          meta:{title:'子列表B'},
          component: () => import('../views/list/part2.vue')
    }]
  },

加载全部内容