vue怎么实现面包屑

本文小编为大家详细介绍“vue怎么实现面包屑”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue怎么实现面包屑”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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')
    }]
  },

读到这里，这篇“vue怎么实现面包屑”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。