效果

面包屑用于顯示當(dāng)前頁面的路徑，快速返回之前的任意頁面。

一、路由配置

代碼如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

const routes = [
  { 
    path: '/', 
    component: ()=>import("@/views/LoginView") 
  },
  { 
    path: '/login', 
    name: "login",
    component: ()=>import("@/views/LoginView"),
  },
  {
    path: '/home',
    name:"home",
    component: ()=>import("@/views/HomeView"),
    meta:{
      title:'首頁',
      path:"/home"
    },
    children: [
      { //主頁
        path: '/home', 
        component: ()=>import("@/views/main/MainView"),
        meta:{
          title:'',
          path:"/home"
        }
      }, 
      { //個(gè)人信息
        path: 'userinfo', 
        component: ()=>import("@/views/userinfo/UserInfo"), 
        meta:{
          title:'個(gè)人中心',
          path:"/userinfo"
        }
      },  
      { //分析頁
        path: 'analyse', 
        component: ()=>import("@/views/Analyse"),
        meta:{
          title:'分析頁',
          path:"/analyse"
        }
      },  
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

這里使用了router的meta屬性，為其設(shè)置名為title的屬性，用來當(dāng)作面包屑的展示名稱，當(dāng)然，也可以直接使用路由的name屬性。

二、使用步驟

1.Breadcrumb.vue：

代碼如下：

<template>
  <div class="Bread">
    <el-breadcrumb separator="/">
      <!-- to為點(diǎn)擊跳轉(zhuǎn) title為路由中的meta屬性定義的標(biāo)題 -->
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="item.meta.path">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      breadList: [],
    };
  },
  watch: {
    $route() {//監(jiān)聽$route
      this.getBreadcrumb();
    },
  },
  methods: {
    isHome(route) {
      return route.name === "home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首頁
      if (!this.isHome(matched[0])) {
        matched = [].concat(matched);
      }
      this.breadList = matched;
    },
  },
  created() {
    //生命周期中調(diào)用獲取數(shù)據(jù)的方法
    this.getBreadcrumb();
  },
};
</script>

<style>
.Bread{
  height: 30px;
  float: left;
}
</style>

2.在頁面中使用

代碼如下：

<!-- 頭部 -->
<template>
  <div id="app">
    <div class="header">
      <h1>歡迎使用My-Vue-Admin!</h1>
      <div class="full-screen">
        <Avatar></Avatar>
        <FullScroll></FullScroll>
      </div>
    </div>
    <div class="Bread">
      <BreadVue></BreadVue>
    </div>
  </div>
</template>

<script>
// 導(dǎo)入ScreenFull組件，控制全屏
import FullScroll from '@/components/Header/ScreenFull.vue'
// 導(dǎo)入頭像組件
import Avatar from '@/components/Header/AvatarHeader.vue'
// 導(dǎo)入面包屑
import BreadVue from '../components/Bread.vue'
export default {
  components: {
    FullScroll,
    Avatar,
    BreadVue
  },
  data(){
    return{
      breadList:null,
    }
  },
}
</script>

<style lang="less" scoped>
#app {
  background-color: #ffffff;
  margin: 0;
  padding: 0 0 18px 0px;
  box-shadow: 0px 0px 8px 1px #e6e6e6;
  overflow: hidden;
}
.header h1 {
  margin-bottom: 5px;
  height: 50px;
  float: left;
  margin-left: 40px;
}
.header {
  text-align: left;
  overflow: hidden;
  text-align: right;
  box-shadow: 0px 0px 5px 0px #e6e6e6;
}
.header i {
  float: right;
}
#app h1 {
  margin-top: 0;
}
.full-screen:before {
  display: flex;
  overflow: hidden;
  padding-top: 20px;
}
/deep/.el-breadcrumb {
  margin: 20px 0 0 40px;
}
</style>

總結(jié)

文件目錄

vue-router和breadcrumb面包屑結(jié)合，實(shí)現(xiàn)展示當(dāng)前路徑下的路由信息。關(guān)鍵是利用route對(duì)象的matched屬性，得到前匹配的路徑中所包含的所有片段所對(duì)應(yīng)的配置參數(shù)對(duì)象數(shù)組，然后遍歷數(shù)組，并利用數(shù)組中對(duì)象的信息，展示到面包屑中。每個(gè)對(duì)象的path屬性為其對(duì)應(yīng)的路由路徑，meta屬性為其元數(shù)據(jù)對(duì)象。
文章來源地址http://www.zghlxwxcb.cn/news/detail-699053.html

到了這里，關(guān)于vue + Element UI 動(dòng)態(tài)Breadcrumb 面包屑的制作的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！