1. 引言
通过前面的章节，我们已经熟悉了ElementUI的使用 ，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
- 《Vue系列教程（09）- 事件绑定》
- 《Vue系列教程（10）- Model数据内容双向绑定》
- 《Vue系列教程（11）- 组件详解》
- 《Vue系列教程（12）- Axios异步通信》
- 《Vue系列教程（13）- 计算属性（computed）》
- 《Vue系列教程（14）- 插槽（slot）》
- 《Vue系列教程（15）- 事件内容分发（$emit）》
- 《Vue系列教程（16）- 模块打包器（webpack）》
- 《Vue系列教程（17）- 路由（vue-router）》
- 《Vue系列教程（18）- 集成UI框架（ElementUI）》
本文继续衔接上一篇博客，主要讲解Main.vue里面的内容。
2. 案例
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。
2.1 创建子路由
① 在components文件夹里定义user文件夹，并新建4个文件，如下：
② Profile.vue（个人信息）里面的内容：
<template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style scoped> </style>
③ List.vue（用户列表）里面的内容：
<template> <h1>用户列表</h1> </template> <script> export default { name: "UserList" } </script> <style scoped> </style>
④ ContentList,vue（内容列表）里面的内容 :
<template> <h1>内容列表</h1> </template> <script> export default { name: "ContentList" } </script> <style scoped> </style>
⑤ ClassManagement.vue（分类管理）里面的内容：
<template> <h1>分类管理</h1> </template> <script> export default { name: "ClassManagement" } </script> <style scoped> </style>
2.2 引用子路由
① 修改Main.vue的内容，这里使用了 ElementUI 布局容器组件，代码如下：
<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/manager">分类管理</router-link> </el-menu-item> <el-menu-item index="2-2"> <!--插入的地方--> <router-link to="/user/UserProfile">内容列表</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>
2.3 定义子路由
在index.js里定义，代码如下：
//导入vue import Vue from 'vue'; import VueRouter from 'vue-router'; //导入组件 import Main from "../components/Main"; import UserList from "../components/user/List"; import UserProfile from "../components/user/Profile"; import UserClassManagement from "../components/user/ClassManagement"; import UserUserProfile from "../components/user/ContentList"; //使用 Vue.use(VueRouter); //导出 export default new VueRouter({ routes: [ { //首页 path: '/main', component: Main, // 配置子路由 children: [ { path: '/user/profile', component: UserProfile, }, { path: '/user/list', component: UserList, }, { path: '/user/manager', component: UserClassManagement, }, { path: '/user/userProfile', component: UserUserProfile, } ] }, // 默认首页 { path: '/', redirect: '/main' }, ] })
2.4 运行程序
运行程序npm run serve，浏览器输入http://localhost:8081/#/main，效果如下：
| 默认页面 | 点击个人信息 | 点击用户列表 |
 |
 |
 |
本文完!
