路由嵌套(前提是要构建过Vue与ElmentUI上一篇文章)
路由嵌套其实也不难,其实就像是组件搭积木一样,我们把小路由放在大路由上面就可以了。然后重新搭建一下Header也就是首页(老师里面的Main文件)
代码(Header.vue)
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></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-menu"></i>内容管理
</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</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></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
name:"Header"
};
</script>
代码(index.js)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../view/Login";
import Header from "../view/Header";
import Profile from "../view/user/Profile";
import List from "../view/user/List";
Vue.use(VueRouter);
export default new VueRouter({
routes:[
{
path:'/login',
component:Login,
},
{
path: '/main',
component: Header,
children:[
{
path:'/user/profile',
component:Profile
},
{
path:'/user/list',
component:List
}
]
}
]
})