1. 创建 index.vue
<template>
<div>
<el-container>
<el-header>后台管理</el-header>
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#d3dce6"
router
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航菜单</span>
</template>
<el-menu-item-group>
<!-- 修改 index的路由地址 -->
<el-menu-item index="/course">
<i class="el-icon-menu"></i>课程管理
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<!-- 主要区域 -->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.el-container {
height: 725px;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 30px;
}
</style>
2. 配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入Login.vue组件
import Login from "@/components/Login" //登录操作
import Index from "@/components/Index"
import Course from "@/components/Course"
Vue.use(VueRouter)
const routes = [
//访问/.也跳转到login
{
path:"/",
//redirect:"login", //重定向到login
redirect:"index",
},
//登录操作路由
{
path:"/login",
name:"login",
component:Login
},
//登录主页
{
path:"/index",
name:"index",
component:Index,
//添加子路由,使用children属性来表示子路由
children:[
//课程信息子路由
{
path:"/course",
name:"course",
component:Course
}
]
}
]
const router = new VueRouter({
routes
})
export default router
节选自拉钩教育JAVA系列课程