面包屑效果
三级路由,可以通过面包屑进行跨级跳转
面包屑组件,breadcrumb.vue
<template>
<div class="navbar clearfix">
<el-breadcrumb
class="breadcrumb-container"
separator-class="el-icon-arrow-right"
>
<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.meta.title);
const first = matched[0];
this.levelList = matched;
},
},
};
</script>
应用
在最外层引入这个组件
<script>
import Breadcrumb from './navbar.vue'
export default {
components: {
Breadcrumb
}
}
</script>
路由
多级路由嵌套设置默认页面 只需要把默认的子路由的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 // 添加该字段,表示进入这个路由是需要登录的
}
}
]
}
]
}
]
})
多路由嵌套
需要注意的是,每个子路由都需要对应一个 标签来存放
我新建了一个main.vue来存放多路由嵌套多个界面
<template>
<keep-alive>
<router-view :key="Math.random()"></router-view>
</keep-alive>
</template>
<script>
</script>
<style>
</style>