vue面包屑组件封装,vue 面包屑 动态修改

　　本文主要详细介绍了用vue实现面包屑的方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

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

　　面包屑是什么：

　　面包屑是作为辅助和补充的二次导航方案，可以让用户知道自己在网站或应用中的位置，可以很容易地回到原来的地方。面包屑最常见的样式是水平文本链接，由大于号“”分隔，这也暗示了它们的层次关系。

实现原理：

　　1.在路由器配置中添加元(元数据)对象以存储一些定制内容。例如，在breadcrumbs的实现中添加title变量，这是breadcrumbs显示的多级标题。

　　2.调用watch来监视使用面包屑的页面中路由的变化，并使用这个。$route.matched获取与当前路由匹配的所有网段的配置参数对象，并返回一个数组保存在列表中。

　　3.用v-for遍历li标签，以list.meta.title作为router-link的{标题信息}，to="list.path "，在面包屑上动态渲染列表信息。

　　具体的代码演示

　　组件：

　　breadcrumb.vue

　　模板

　　div class=breadcumb

　　保险商实验所

　　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

　　/李

　　/ul

　　/div

　　/模板

　　脚本

　　导出默认值{

　　姓名：家，

　　data(){

　　返回{

　　列表：[]

　　}

　　},

　　//侦听路由更改

　　观察：{

　　$路线(至，自){

　　let matched=to.matched//这个。$route.matched

　　//这个地方用来固定一级目录或者主页。

　　if(matched.length matched[0])。名字！==home){

　　Matched=[{path:/home ，name: home ，meta: {title: home }}，匹配]；

　　}

　　.数组名是追加数组的一种方式。

　　var arr=[1，2，3]

　　var arr1=[4，5]

　　var arr2=[2，arr1]==[2，4，5]

　　//

　　this.lists=matched

　　}

　　}

　　}

　　/脚本

　　配置路由文件：

　　路由器/index.js

　　{

　　路径：“/list”，

　　名称：列表，

　　Meta:{title:列表显示 }，

　　组件：()=导入(./views/list/index.vue )，

　　孩子：[{ //次要路线

　　//路径： testA ，

　　路径：“/list/testA”，

　　姓名：遗嘱，

　　Meta:{title:子列表A}，

　　组件：()=导入(./views/list/part1.vue )

　　},

　　{

　　路径：“testB”，

　　名称：测试b ，

　　Meta:{title:子列表B}，

　　组件：()=导入(./views/list/part2.vue )

　　}]

　　},

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。