實現基於Vue的麪包屑導航+連接可跳轉組件

時間 2020-06-03

標籤實現基於 vue 麪包屑導航連接組件简体版

原文原文鏈接

簡單的來講，麪包屑導航的做用就是告訴用戶他們在網站中的位置，方便用戶肯定下一步去留，對於用戶來講這是很好的體驗。javascript

靜態路由-麪包屑導航

須要手動配置路由和菜單。css

項目路由以下

const routes = [
 {
    path: '/home1',
    name: 'home1',
    meta: {
      breadID: '0'
    }
  },
  {
    path: '/home2',
    name: 'home2',
    meta: {
      breadID: '0-0'
    }
  },
  {
    path: '/home3',
    name: 'home3',
    meta: {
      breadID: '0-0-0'
    }
  },
  {
    path: '/home4',
    name: 'home4',
    meta: {
      breadID: '1'
    }
  },
  {
    path: '/home5',
    name: 'home5',
    meta: {
      breadID: '1-0'
    }
  },
  {
    path: '/home6',
    name: 'home6',
    meta: {
      breadID: '1-0-0'
    }
  }
]
複製代碼

菜單配置以下

麪包屑導航有一個層級的菜單。html

let breadNavList = [
    {
        id:"0",
        name:'0-第一級',
        url:'/home1',
        menu:[
            {
                id:'0-0',
                name:'0-第二級',
                url:'/home2',
                menu:[
                  {
                    id:'0-0-0',
                    name:'0-第三級',
                    url:'/home3',
                  }
                ]
            }
        ]
    },
    {
        id:"1",
        name:'1-第一級',
        url:'/home3',
        menu:[
            {
                id:'1-0',
                name:'0-第二級',
                url:'/home4',
                menu:[
                  {
                    id:'1-0-0',
                    name:'0-第三級',
                    url:'/home5',
                  }
                ]
            }
        ]
    }
]
複製代碼

能夠看到在路由的meta字段中加入了屬性breadID，詳情解說一下這個屬性java

breadID代表當前路由在menu菜單中的位置。git

'0' 當前麪包屑有一級，0表明該路由在在菜單欄中的位置breadNavList[0]
'0-0' 表明當前麪包屑有兩級，breadNavList[0].menu[0]
'0-0-0' 表明當前麪包屑有三級，breadNavList[0].menu[0].menu[0]
'0-1-0' 表明當前麪包屑有三級，breadNavList[0].menu[1].menu[0]
.....以此類推
複製代碼

實現

實現一個容器

數組bread用來裝載須要展示的路由。如：github

bread = ['第一級','第二級','第三級']
bread = ['第一級','第二級']
複製代碼

效果：npm

第一級 > 第二級 > 第三級
第一級 > 第二級
複製代碼

監聽路由變化

當路由變化的時候，麪包屑也會發生變化。數組

判斷當前是否有路由
判斷當前路由是否有字段breadID
如如有，調用getBread函數遞歸獲取麪包屑

watch:{
      '$route':{
        handler(){
          this.bread = []
          if(this.$route && this.$route.meta && this.$route.meta.breadID){
            let arr = this.$route.meta.breadID.split('-')
            this.getBread(arr,this.breadNavList)
          } else {
            console.error('字段`this.$route.meta.breadID`沒有設置')
          }
        },
        immediate:true
      }
    }
複製代碼

遞歸獲取麪包屑

getBread參數：bash

當前路由屬性breadID，轉化成數組arr，如：'0-1-0' -> ['0','1','0']
菜單menu，當前層級下的菜單。

思路：函數

獲取arr的長度，若是小於0，說明這個層級不存在，不往下遞歸。
若是大於0，說明層級存在，將這一層的name以及url加入容器bread。
取出arr第一個元素。
循環第一，二，三步，直到arr的長度爲0。

getBread(arr,menu){
    if(arr.length < 0){
       return;
    }
    this.bread.push(menu[arr[0]])
    menu = menu[arr[0]].menu
    arr.shift()
    this.getBread(arr,menu)
}
複製代碼

所有代碼

<template>
  <div class="bread-wrap">
    <div class="bread-item" v-for="(item,index) in bread" :key="index">
      <span @click="toBreadRouter(item)">{{item.name}}</span><i v-if="index !== bread.length - 1"> > </i></div>
  </div>
</template>

<script> export default { name: "breadNav", data() { return { bread:[],//麪包屑容器 breadNavList:[]// 麪包屑菜單 } }, watch:{ '$route':{ handler(){ this.bread = [] if(this.$route && this.$route.meta && this.$route.meta.breadID){ let arr = this.$route.meta.breadID.split('-') this.getBread(arr,this.breadNavList) } else { console.error('字段`this.$route.meta.breadID`沒有設置') } } } }, methods: { getBread(arr,menu){ if(arr.length > 0){ this.bread.push(menu[arr[0]]) menu = menu[arr[0]].menu arr.shift() if(arr.length > 0){ return this.getBread(arr,menu) } } }, toBreadRouter(item){ this.$emit('changeRoute',item) } } } </script>

<style scoped> .bread-wrap{ color:#606266; font-size:14px; } .bread-wrap .bread-item{ display: inline-block; } .bread-wrap .bread-item span:hover{ cursor: pointer; color:#409EFF; } .bread-wrap .bread-item:last-child{ cursor: auto; color:#303133; } .bread-wrap .bread-item:last-child span{ cursor: auto; } .bread-wrap .bread-item i{ font-style: normal; } </style>
複製代碼