嵌套路由的使用主要分为以下几个部分:
1、像以前一样编写一个要被嵌套的组件
<template>
<div>内容列表</div>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
2、在路由配置里的主路由里面使用 children:填入跟正常路由一样的属性
import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login";
import Main from "../views/Main";
import UserProfile from "../views/user/Profile"
import UserList from "../views/user/List"
import UserType from "../views/user/Type"
import UserContent from "../views/user/Content"
Vue.use(Router);
export default new Router({
routes:[
{
path:'/',
component:Login
},
{
path:'/main',
component: Main,
children:[
{
path:'/user/profile',
component:UserProfile
},
{
path:'/user/list',
component:UserList
},
{
path:'/user/type',
component: UserType
},
{
path:'/user/content',
component: UserContent
}
]
}
]
});
3在主类里面使用
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">
<router-link to="/user/type">个人信息</router-link>
</el-menu-item>
<el-menu-item index="2-2">
<router-link to="/user/content">内容列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
这是总目录