vue-router 利用 $route 的 matched 属性实现面包屑效果

我们以一个固定的路由表来说明

let routes = [{path: '/',component: () => import('../pages/layout/Layout.vue'),children: [{name: 'pageA',path: 'a',component: PageA,children: [{name: 'pageAA01',path: 'aa-01',component: PageAA01},{name: 'pageAA02',path: 'aa-02',component: PageAA02},{name: 'pageAA03',path: 'aa-03',component: PageAA03},]}]}
]

matched 顾名思义就是匹配，假如我们目前的路由是/a/aa-01，那么此时 this.$route.matched匹配到的会是一个数组，包含 '/'，'/a'，'/a/aa-01'，这三个path的路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。

//demo
<template><div class="nav-wrap"><router-link v-for="(item, index) in navList" :key="index">{{ item.name }} {{index !== list.length - 1 ? '/' : ''}}</router-link></div>
</template>
<script>export default {data() {navList: []},watch: {$route: {handler() {this.getNavList()},immediate: true}},methods: {getNavList() {this.$route.matched.filter(item => item.name);}}}
</script>

vue-router 利用 $route 的 matched 属性实现面包屑效果相关推荐

Vue - router vs route
router vs route 两者有本质的区别: methods: {btnClick() {console.log("User.vue...router...", this.$ ...
面包屑效果（element + vue）
前言:最近在写一个基于element + vue 技术的pc端外卖管理系统项目,其中主内容头部区域用到了面包屑的效果,面包屑的文字内容和点击文字跳转到对应得组件页面,要根据路由信息动态生成.在这里呢, ...
Vue项目之Element-UI(Breadcrumb)动态面包屑效果
效果面包屑作用面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级原始方式最笨的方法就是在每个需要面包屑的页面中固定写好 ...
vue router meth的2个属性： keepAlive 、deepth
然后: meta: { keepAlive: true, //保持状态这个路由是否需要缓存 deepth: 0.5 //深度页面之间的前进后退的层次关系 [可以用来搞动画] },
前端学习（3046）：vue+element今日头条管理-页面布局和面包屑筛选
vue+elementui最简单的面包屑写法
Vue+Elementui最简单.最完整的面包屑写法 1.创建一个面包屑组件 2.将组件导入主页文件 3.使用面包屑 4.效果图 1.创建一个面包屑组件 1.1.利用路由对象 matched 属性实现 ...
vue实战-面包屑的处理
vue实战-面包屑的处理 1.面包屑处理分类操作在Search路由模块下通过v-if来确定面包屑的存在,设置点击事件处理删除面包屑后的情况 <ul class="fl sui-ta ...
vue 自动生成面包屑导航
根据点击的导航栏自动获取相应的面包屑导航由于我们的路由是英文的,可以在路由中定义相关信息,进行捕获就可以了 const routes: Array<RouteRecordRaw> = [ ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...

vue-router 利用 $route 的 matched 属性实现面包屑效果

vue-router 利用 $route 的 matched 属性实现面包屑效果相关推荐

最新文章

热门文章