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中面包屑的实现方法相关推荐

vue 中面包屑带跳转的做法
首先要在子页面的meta中定义 {path: '/staffsManagement',component: () => import(/* webpackChunkName: "das ...
vue实战-面包屑的处理
vue实战-面包屑的处理 1.面包屑处理分类操作在Search路由模块下通过v-if来确定面包屑的存在,设置点击事件处理删除面包屑后的情况 <ul class="fl sui-ta ...
created写法_在vue中created、mounted等方法使用小结
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
在vue中methods互相调用的方法
在vue中methods互相调用的方法转载于:https://www.cnblogs.com/macT/p/10212878.html
vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
Vue中v-bind=“$attrs”的使用方法
$attrs 主要用于组件之间的隔代传值.例如有父组件A,子组件B,孙组件C 三个组件. 在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中 ...
FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
Vue动态面包屑功能的实现方法
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...
php面包屑导航实现思路,WordPress实现面包屑导航的方法
面包屑导航是一个很基本的功能,当网站结构复杂的时候,面包屑导航可以不让用户迷失方向.WordPress实现面包屑导航无非是安装插件,或者直接写代码.在网上看了不少介绍,有些代码感觉质量不高,插件也有很 ...

vue中面包屑的实现方法

vue中面包屑的实现方法

vue中面包屑的实现方法相关推荐

最新文章

热门文章