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就是面包屑显示的名字