vue 動態麪包屑 通過麪包屑帶參數跨級跳轉 麪包屑動態標題 多級路由嵌套設置默認頁面和隱藏左側導航欄顯示

麪包屑

實現效果

可以通過麪包屑進行跨級跳轉

以下爲我的麪包屑組件,breadcrumb.vue

<template>
  <div class="navbar clearfix">
    <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item > <span @click="back">返回</span> </el-breadcrumb-item>
      <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="item.path">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: 'Navbar',
    data() {
      return {
        levelList: []
      }
    },
    watch: {
      $route() {
        this.getBreadcrumb()
      }

    },
    created() {
      this.getBreadcrumb()
    },
    methods: {
      back() {
        this.$router.go(-1); //返回上一層
      },
      getBreadcrumb() {
        //$route.matched一個數組 包含當前路由的所有嵌套路徑片段的路由記錄
        let matched = this.$route.matched.filter(item => item.name)
        const first = matched[0];
        this.levelList = matched
      }
    }
  }
</script>

應用麪包屑

在最外層的主頁Home.vue中的js部分,其他可以自己補上

然後在主體上加上<router-view></router-view>標籤存放內容

<script>
  import Breadcrumb from './navbar.vue'
  export default {
    components: {
      Breadcrumb
    }
}
</script>

動態麪包屑

實現動態麪包屑本人的方法不一定是最好的,但是比較方便.

var title = "想設置的標題";
this.$route.matched[this.$route.matched.length - 1].meta.title = title; //設置路由名稱
            let path = this.$route.matched[this.$route.matched.length - 1].path;
            if (path.indexOf("?") > 0) {
              this.$route.matched[this.$route.matched.length - 1].path = path.split("?")[0] + "?id=" +
                id;
            } else {
              this.$route.matched[this.$route.matched.length - 1].path = path + "?id=" + id; //設置路由路徑
            }

把這段代碼添加在需要實現的頁面就自動會在跳轉的時候將麪包屑的名稱更改

路由

多級路由嵌套設置默認頁面 只需要把默認的子路由的path項設定爲空

以下爲路由的索引頁./route/index.js的實例

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: resolve => require(['@/components/Login'], resolve),
      hidden: true //表示在左側導航欄隱藏
    },
    {
      path: '/home.html',
      name: '一級',
      component: resolve => require(['@/components/Home'], resolve),
      iconCls: "el-icon-menu",
      meta: {
        title: '一級',
        keepAlive: false, // 不需要緩存
        requireAuth: true //表示進入這個路由是需要登錄的
      },
      children: [
        {
          path: '/feedback.html',
          component: resolve => require(['@/components/user/feedback'], resolve),
          name: '二級',
          meta: {
            title: '二級',
            keepAlive: false, // 不需要緩存
            requireAuth: true // 添加該字段，表示進入這個路由是需要登錄的
          },
            children: [{
          path: '',//這裏設置爲空
          component: resolve => require(['@/components/user/userChildren'], resolve),
          name: '三級',
          meta: {
            title: '三級',
            keepAlive: false, // 不需要緩存
            requireAuth: true // 添加該字段，表示進入這個路由是需要登錄的
          }
        }
      ]
        }
      ]
    }
  ]
})

多路由嵌套

需要注意的是,每個子路由都需要對應一個 <router-view></router-view>標籤來存放

我新建了一個main.vue來存放多路由嵌套多個界面

<template>
  <keep-alive>
    <router-view :key="Math.random()"></router-view>
  </keep-alive>
</template>
<script>
</script>
<style>
</style>

/route/index.js裏面設置的title就是麪包屑顯示的名字