vue實(shí)現(xiàn)面包屑的方法

更新時(shí)間：2022年04月15日 08:29:23 作者：栿志

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue中面包屑的實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下

面包屑是什么：

面包屑是作為輔助和補(bǔ)充的導(dǎo)航方式（secondary navigation scheme），它能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的地點(diǎn)。
最常見的面包屑的樣式是：橫向的文字鏈接，由大于號(hào)“>”分開，這個(gè)符號(hào)也暗示了它們的層級(jí)關(guān)系

實(shí)現(xiàn)原理：

1.在router配置中加入meta(元數(shù)據(jù))對(duì)象，存放一些自定義的內(nèi)容。例如在面包屑的實(shí)現(xiàn)中加入title變量，這個(gè)變量則是面包屑展示出來的多級(jí)標(biāo)題。

2.在用到面包屑的頁面中調(diào)用watch監(jiān)聽，監(jiān)聽route的變化，用this.$route.matched獲取到匹配當(dāng)前路由的所有片段的配置參數(shù)對(duì)象，返回一個(gè)數(shù)組，存到list中

3.用v-for 遍歷li標(biāo)簽，將list.meta.title作為router-link的{標(biāo)題信息}，:to=“list.path”，將list信息動(dòng)態(tài)渲染到面包屑上

具體的代碼演示

面包屑組件：

breadcrumb.vue

<template>
? ? <div class="breadcumb">
? ? ? ? <ul>
? ? ? ? ? <li v-for="(v,i) in lists" :key="i">
? ? ? ? ? ? <router-link :to="{path:v.path}">{{v.meta.title}}</router-link>
? ? ? ? ? ? <span v-if="i<lists.length-1">/</span>
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </div>
</template>

<script>

export default {
? name: 'Home',
? data(){
? ? return {
? ? ? lists:[]
? ? }
? },

? //監(jiān)聽路由變化
? watch:{
? ? $route(to,from){
? ? ? let matched = to.matched; ? //this.$route.matched
? ? ? //這個(gè)地方是為了固定第一級(jí)目錄是首頁不變
? ? ? if(matched.length && matched[0].name!=="home"){
? ? ? ? matched = [{ path: '/home',name: 'home',meta:{title:'首頁'}},...matched];
? ? ? }
? ? ? ...數(shù)組名 是一種追加數(shù)組的方法
? ? ? var arr = [1,2,3]
? ? ? var arr1 = [4,5]
? ? ? var arr2 = [2,...arr1] == [2,4,5]
? ? ? //
? ? ? this.lists = matched;
? ? }
? }
}
</script>

配置路由文件：

router/index.js

{
? ? path: '/list',
? ? name: 'list',
? ? meta:{title:'列表展示'},
? ? component: () => import('../views/list/index.vue'),
? ? children:[{ ? ? ?//二級(jí)路由
? ? ? ? ? //path:'testA', ? ?
? ? ? ? ? path:'/list/testA', ?
? ? ? ? ? name:'testA',
? ? ? ? ? meta:{title:'子列表A'},
? ? ? ? ? component: () => import('../views/list/part1.vue')
? ? ? ? },
? ? ? ? {
? ? ? ? ? path:'testB', ??
? ? ? ? ? name:'testB',
? ? ? ? ? meta:{title:'子列表B'},
? ? ? ? ? component: () => import('../views/list/part2.vue')
? ? }]
? },

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: