vue怎么實現面包屑

本文小編為大家詳細介紹“vue怎么實現面包屑”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue怎么實現面包屑”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

vue中面包屑的實現方法，供大家參考，具體內容如下面包屑是什么：

• 面包屑是作為輔助和補充的導航方式（secondary navigation scheme），它能讓用戶知道在網站或應用中所處的位置并能方便地回到原先的地點。

• 最常見的面包屑的樣式是：橫向的文字鏈接，由大于號“>”分開，這個符號也暗示了它們的層級關系

實現原理：

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

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

3.用v-for 遍歷li標簽，將list.meta.title作為router-link的{標題信息}，:to=“list.path”，將list信息動態渲染到面包屑上

具體的代碼演示

面包屑組件：

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:[]
    }
  },

  //監聽路由變化
  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];
      }
      ...數組名 是一種追加數組的方法
      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')
    }]
  },

讀到這里，這篇“vue怎么實現面包屑”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。