这篇文章主要为大家详细介绍了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+elementUI动态生成面包屑导航教程
- Vue动态面包屑功能的实现方法
- vue动态路由实现多级嵌套面包屑的思路与方法
- vue2.0 elementUI制作面包屑导航栏
- VUE+elementui面包屑实现动态路由详解
- vue element-ui实现动态面包屑导航
- vue中的面包屑导航组件实例代码
- Vue 解决多级动态面包屑导航的问题
- Vuex,iView UI面包屑导航使用扩展详解
- vue 封装面包屑组件教程
