基于vue-router的matched實(shí)現(xiàn)面包屑功能

更新時(shí)間：2021年09月26日 12:30:37 作者：月半小夜曲_

本文主要介紹了基于vue-router的matched實(shí)現(xiàn)面包屑功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文主要介紹了基于vue-router的matched實(shí)現(xiàn)面包屑功能，分享給大家，具體如下：

如上圖所示，就是常見的面包屑效果，面包屑的內(nèi)容一般來(lái)說(shuō)，具有一定的層級(jí)關(guān)系，就以上圖為例，首先是進(jìn)入首頁(yè)，然后點(diǎn)擊左側(cè)導(dǎo)航，進(jìn)入活動(dòng)管理下的活動(dòng)列表頁(yè)面，然后點(diǎn)擊某一條數(shù)據(jù)，進(jìn)入活動(dòng)詳情頁(yè)面

這正好與vue-router的mached屬性所獲取的結(jié)果有著相似的原理，所以可以基于此來(lái)實(shí)現(xiàn)面包屑效果！

這里我使用了elementui的面包屑組件和導(dǎo)航菜單組件，先貼出最后的效果圖：

路由配置

項(xiàng)目結(jié)構(gòu)：

側(cè)邊導(dǎo)航欄是首頁(yè)、電子數(shù)碼、服裝鞋帽頁(yè)面都會(huì)顯示的，所以我創(chuàng)建了一個(gè)layout組件，將這三個(gè)路由的component都指向該組件，并將導(dǎo)航欄和面包屑都寫在layout組件中

因?yàn)樵摴δ艿膶?shí)現(xiàn)依賴于路由的層級(jí)嵌套關(guān)系，所以要提前構(gòu)思好路由的配置，我這里的路由配置如下：

const routes = [
 //匹配空路由，重定向到根路由
    {
        path:'',
        redirect: '/home',
        meta:{
            showInbreadcrumb:false
        }
    },
    //根路由
    {
        path:'/home',
        component: ()=>import('@/views/layout/index.vue'),
        name:'home',
        meta:{
            title:"首頁(yè)",
            showInbreadcrumb:true
        }
    },
    //電子數(shù)碼
    {
        path:'/electronics',
        name:'電子數(shù)碼',
        component: ()=>import('@/views/layout/index.vue'),
        redirect: '/electronics/computer',
        meta:{
            title:"電子數(shù)碼",
            showInbreadcrumb:true
        },
        children:[
            {
                path:'computer',
                name:'computer',
                component()=>import('@/views/electronics/children/computer/index.vue'),
                meta:{
                    title:"電腦",
                    showInbreadcrumb:true
                }
            },
            {
                path:'phone',
                name:'手機(jī)',
                component: ()=>import('@/views/electronics/children/phone/index.vue'),
                meta:{
                    title:"手機(jī)",
                    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
                }
            }
        ]
    },
    //放在最后，當(dāng)前面所有路由都沒(méi)匹配到時(shí)，會(huì)匹配該路由，并重定向到根路由
    {
        path:'*',
        redirect:'/',
        meta:{
            showInbreadcrumb:false
        } 
    },   
]

這里我配置的路由有首頁(yè)、電子數(shù)碼、服裝鞋帽,這三個(gè)是一級(jí)路由，其中電子數(shù)碼和服裝鞋帽還有二級(jí)路由，在meta中我自定義了數(shù)據(jù)，showInbreadcrumb用于判斷是否顯示在面包屑中，title為在面包屑顯示的名稱

獲取路由信息

模板部分：

///src/views/layout/index.vue
<template>
    <div class="layout">
        <!-- 側(cè)邊導(dǎo)航欄 -->
        <div class="sideMenu">
            <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                >
                    <div v-for="(item,index) in routes" :key="index" :index="index+''">
                        <!-- 沒(méi)有二級(jí)菜單的 -->
                        <el-menu-item :index="index+''" v-if="!item.children">
                            <router-link :to="{name:item.name}">{{item.meta.title}}</router-link>
                        </el-menu-item>
                        <!-- 有二級(jí)菜單的 -->
                        <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:{
        // 側(cè)邊導(dǎo)航數(shù)據(jù)
        routes(){
            // 從$router.options中獲取所有路由信息并過(guò)濾
            return this.$router.options.routes.filter((item)=>{
                return item.meta.showInbreadcrumb
            });
        },
        // 面包屑數(shù)據(jù)
        breadcrumb(){
            // 根據(jù)路由配置meta中的showInbreadcrumb字段過(guò)濾
            let matchedArr = this.$route.matched.filter((item)=>{
                return item.meta.showInbreadcrumb}
            );
            // 因?yàn)槭醉?yè)比較特殊，必須一直顯示在面包屑第一個(gè)，如果沒(méi)有首頁(yè)路由信息，手動(dòng)添加到最前面
            if(matchedArr[0].meta.title !== '首頁(yè)'){
                matchedArr.unshift(
                    {
                        path:'/home',
                        meta:{  
                            title:"首頁(yè)",
                            showInbreadcrumb:true
                        }
                    },
                )
            }
            return matchedArr;
        },
    }
}

注意：拿到this.$route.matched后，不能在其結(jié)果上直接追加然后再過(guò)濾，否則會(huì)頁(yè)面錯(cuò)亂并且報(bào)錯(cuò)，應(yīng)該先f(wàn)ilter,這樣會(huì)返回一個(gè)新的數(shù)組，然后再判斷追加首頁(yè)信息

最終效果

到此這篇關(guān)于基于vue-router的matched實(shí)現(xiàn)面包屑功能的文章就介紹到這了,更多相關(guān)vue-router matched面包屑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: