本文主要介紹了基於-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:'電子數碼',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:"手機",{
                path:'tv',name:'電視',componwww.cppcns.com
 
ent: ()=>import('@/views/electronics/children/tv/index.vue'),meta:{
                    title:"電視",showInbreadcrumb:true
                }
            }
        ]
    },//服裝鞋帽
    {
        path:'/clothing',name:'服裝鞋帽',redirect: '/clothing/tops',meta:{
            title:"服裝鞋帽",children:[
            {
                pwww.cppcns.com
 
ath:'tops',name:'上裝',component:  ()=>import('@/views/clothing/children/tops/index.vue'),meta:{
                    title:"上裝",{
                path:'lower',name:'下裝',component:  ()=>import('@/views/clothing/children/lower/index.vue'),meta:{
                    title:"下裝",{
                path:'shoes',name:'鞋子',component:  ()=>import('@/views/clothing/children/shoes/index.vue'),meta:{
                    title:"鞋子",showInbreadcrumb:true
                }
      WrqLx      }
        ]
    },//放在最後，當前面所有路由都沒匹配到時，會匹配該路由，並重定向到根路由
    {
        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>

部分：

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實現麵包屑功能的文章就介紹到這了,更多相關vue-router matched麵包屑內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！