最近写了一个后台的demo,由于需求需要根据自己的路由生成一个面包屑;所以去网上搜索了一下对网上的代码进行了整合理解;顺便做一个记录以便日后查看。
1.首先来看看需求 企业管理 > 档案管理 > 许可申请 ![]() 在这次的demo中我们要根据用户点击不同导航时改变面包屑的状态 2.再让我们来看看我们的路由吧 { path: '/systemManagement', name: 'systemManagement', component: () => import(/* webpackChunkName: "about" */ '../components/qygl.vue'), meta: {title:'企业管理'}, children:[ { path: '/fileManagement', name: 'fileManagement', component: () => import(/* webpackChunkName: "about" */ '../components/qygl/dagl.vue'), meta: {title:'档案管理'}, children:[ { path: '/', name: 'PersonnelInformation', component: () => import(/* webpackChunkName: "about" */ '../components/qygl/PersonnelInformation.vue'), }, { path: '/Applicationforpermission2', name: 'Applicationforpermission2', component: () => import(/* webpackChunkName: "about" */ '../components/qygl/Applicationforpermission2.vue'), meta: {title:'许可申请'} }, ] }, ] } 此处的路由逻辑为:企业管理 > 档案管理 > 许可申请 3.那么我们应该如何实现呢? 当然是选择使用matched了啦,那matched是什么呢? matched返回的是一个数组,包含了当前路由的所有嵌套路径的路由记录,那么我们怎么得知当前匹配的路由的信息以及如何展示给用户呢? vue在路由中有一个meta属性,里面可以包含许多的信息,那么既然这样是不是我们就可以在这里做文章了呢,答案是肯定的,我们可以给meta属性加上一个title属性,在title中添加我们对当前路由的一些解释,就像这样 meta: {title:'许可申请'}那么我们这样配置好路由后,怎么实现呢? 直接先上代码吧 export default { name: "breadcrumb", data() { return { levelList: [] } }, watch: { $route() { this.getBreadcrumb() } }, created(){ this.getBreadcrumb() }, methods:{ getBreadcrumb() { //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录 let matched = this.$route.matched.filter(item => item.name) const first = matched[0]; if (first && first.name.trim().toLocaleLowerCase() !== 'Home'.toLocaleLowerCase()) { matched = [{ path: '/Home ', meta: { title: 'Home' }}].concat(matched) } this.levelList = matched } } } 这里,我们定义了一个函数去得到当前路由的记录,并将其存入数组中,供给组件调用,在创创建完成后调用了该函数, watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态,所以我们使用了watch去监听整个路由的变化情况 template中的代码 <div class="navbar clearfix"> <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right"> <el-breadcrumb-item><router-link to="/BackStageHome">首页</router-link></el-breadcrumb-item> <div class="router"> <el-breadcrumb-item class="whitec" v-for="item in levelList":key="item.path" :to="item.path">pw_item.meta.title</el-breadcrumb-item> </div> </el-breadcrumb> </div>这里的逻辑是在页面中遍历得到的levelList数组,将其中的路由提取出来,并生成面包屑。我在这里使用的是elementUI ,大家也可以根据自己的需求进行设计 以上这篇Vue路由对象属性matched就是我分享给大家的内容了,如有不对的地方欢迎大家的指正。 |
|