亲宝软件园·资讯

展开

vue实现面包屑

栿志 人气:0

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

面包屑是什么:

实现原理:

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

加载全部内容

相关教程
猜你喜欢
用户评论