vue实现面包屑的方法
短信预约 -IT技能 免费直播动态提醒
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')
}]
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
