欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年04月15日 08:29:23   作者：栿志  
這篇文章主要為大家詳細介紹了vue實現(xiàn)面包屑的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

面包屑是什么：

  • 面包屑是作為輔助和補充的導航方式（secondary navigation scheme），它能讓用戶知道在網站或應用中所處的位置并能方便地回到原先的地點。
  • 最常見的面包屑的樣式是：橫向的文字鏈接，由大于號“>”分開，這個符號也暗示了它們的層級關系

實現(xiàn)原理：

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

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

3.用v-for 遍歷li標簽，將list.meta.title作為router-link的{標題信息}，:to=“list.path”，將list信息動態(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
? ? ? //這個地方是為了固定第一級目錄是首頁不變
? ? ? 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:[{ ? ? ?//二級路由
? ? ? ? ? //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')
? ? }]
? },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論