溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了基于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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
