这篇文章主要介绍了基于vue-router的matched如何实现面包屑功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
具体如下:
如上图所示,就是常见的面包屑效果,面包屑的内容一般来说,具有一定的层级关系,就以上图为例,首先是进入首页,然后点击左侧导航,进入活动管理下的活动列表页面,然后点击某一条数据,进入活动详情页面
这正好与vue-router的mached属性所获取的结果有着相似的原理,所以可以基于此来实现面包屑效果!
这里我使用了elementui的面包屑组件和导航菜单组件,先贴出最后的效果图:
项目结构:
侧边导航栏是首页、电子数码、服装鞋帽页面都会显示的,所以我创建了一个layout组件,将这三个路由的component都指向该组件,并将导航栏和面包屑都写在layout组件中
因为该功能的实现依赖于路由的层级嵌套关系,所以要提前构思好路由的配置,我这里的路由配置如下:
const routes = [ //匹配空路由,重定向到根路由 { path:'', redirect: '/home', meta:{ showInbreadcrumb:false } }, //根路由 { path:'/home', component: ()=>import('@/views/layout/index.vue'), name:'home', meta:{ title:"首页", showInbreadcrumb:true } }, //电子数码 { path:'/electronics', name:'电子数码', component: ()=>import('@/views/layout/index.vue'), redirect: '/electronics/computer', meta:{ title:"电子数码", showInbreadcrumb:true }, children:[ { path:'computer', name:'computer', component()=>import('@/views/electronics/children/computer/index.vue'), meta:{ title:"电脑", showInbreadcrumb:true } }, { path:'phone', name:'手机', component: ()=>import('@/views/electronics/children/phone/index.vue'), meta:{ title:"手机", showInbreadcrumb:true } }, { path:'tv', name:'电视', component: ()=>import('@/views/electronics/children/tv/index.vue'), meta:{ title:"电视", showInbreadcrumb:true } } ] }, //服装鞋帽 { path:'/clothing', name:'服装鞋帽', component: ()=>import('@/views/layout/index.vue'), redirect: '/clothing/tops', meta:{ title:"服装鞋帽", showInbreadcrumb:true }, children:[ { path:'tops', name:'上装', component: ()=>import('@/views/clothing/children/tops/index.vue'), meta:{ title:"上装", showInbreadcrumb:true } }, { path:'lower', name:'下装', component: ()=>import('@/views/clothing/children/lower/index.vue'), meta:{ title:"下装", showInbreadcrumb:true } }, { path:'shoes', name:'鞋子', component: ()=>import('@/views/clothing/children/shoes/index.vue'), meta:{ title:"鞋子", showInbreadcrumb:true } } ] }, //放在最后,当前面所有路由都没匹配到时,会匹配该路由,并重定向到根路由 { path:'*', redirect:'/', meta:{ showInbreadcrumb:false } }, ]
这里我配置的路由有首页、电子数码、服装鞋帽,这三个是一级路由,其中电子数码和服装鞋帽还有二级路由,在meta中我自定义了数据,showInbreadcrumb用于判断是否显示在面包屑中,title为在面包屑显示的名称
模板部分:
///src/views/layout/index.vue <template> <div class="layout"> <!-- 侧边导航栏 --> <div class="sideMenu"> <el-menu default-active="0" class="el-menu-vertical-demo" > <div v-for="(item,index) in routes" :key="index" :index="index+''"> <!-- 没有二级菜单的 --> <el-menu-item :index="index+''" v-if="!item.children"> <router-link :to="{name:item.name}">{{item.meta.title}}</router-link> </el-menu-item> <!-- 有二级菜单的 --> <el-submenu :index="index+''" v-else> <template slot="title">{{item.meta.title}}</template> <el-menu-item v-for="(item_,index_) in item.children" :key="index_" :index="index+'-'+index_"> <router-link :to="{name:item_.name}">{{item_.meta.title}}</router-link> </el-menu-item> </el-submenu> </div> </el-menu> </div> <div class="content"> <!-- 面包屑 --> <div class="breadcrumb"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">{{item.meta.title}}</el-breadcrumb-item> </el-breadcrumb> </div> <!-- 路由出口 --> <router-view></router-view> </div> </div> </template>
js部分:
export default { data(){ return{ } }, computed:{ // 侧边导航数据 routes(){ // 从$router.options中获取所有路由信息并过滤 return this.$router.options.routes.filter((item)=>{ return item.meta.showInbreadcrumb }); }, // 面包屑数据 breadcrumb(){ // 根据路由配置meta中的showInbreadcrumb字段过滤 let matchedArr = this.$route.matched.filter((item)=>{ return item.meta.showInbreadcrumb} ); // 因为首页比较特殊,必须一直显示在面包屑第一个,如果没有首页路由信息,手动添加到最前面 if(matchedArr[0].meta.title !== '首页'){ matchedArr.unshift( { path:'/home', meta:{ title:"首页", showInbreadcrumb:true } }, ) } return matchedArr; }, } }
注意:拿到this.$route.matched后,不能在其结果上直接追加然后再过滤,否则会页面错乱并且报错,应该先filter,这样会返回一个新的数组,然后再判断追加首页信息
最终效果
感谢你能够认真阅读完这篇文章,希望小编分享的“基于vue-router的matched如何实现面包屑功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。