标签：lang 代码 header sub theme 效果 内容 配置文件 图片
嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
/user/foo/profile /user/foo/posts+------------------+ +-----------------+| User | | User || +--------------+ | | +-------------+ || | Profile | | +------------> | | Posts | || | | | | | | || +--------------+ | | +-------------+ |+------------------+ +-----------------+在 views/user 目录下创建一个名为 Profile.vue 的视图组件；该组件在当前章节无任何作用，主要用于展示嵌套效果；
1 <template> 2 <div> 3 个人信息 4 </div> 5 </template> 6 <script> 7 export default { 8 name: "UserProfile" 9 } 10 </script> 11 <style scoped> 12 </style>
在 views/user 目录下创建一个名为 List.vue 的视图组件；该组件在当前章节无任何作用，主要用于展示嵌套效果；
1 <template> 2 <div> 3 用户列表 4 </div> 5 </template> 6 <script> 7 export default { 8 name: "UserList" 9 } 10 </script> 11 <style scoped> 12 </style>
修改 router 目录下的 index.js 路由配置文件，代码如下：
1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3 import Login from "../views/Login" 4 import Main from ‘../views/Main‘ 5 // 用于嵌套的路由组件 6 import UserProfile from ‘../views/user/Profile‘ 7 import UserList from ‘../views/user/List‘ 8 Vue.use(Router); 9 export default new Router({ 10 routes: [ 11 { 12 // 登录页 13 path: ‘/login‘, 14 name: ‘Login‘, 15 component: Login 16 }, 17 { 18 // 首页 19 path: ‘/main‘, 20 name: ‘Main‘, 21 component: Main, 22 // 配置嵌套路由 23 children: [ 24 {path: ‘/user/profile‘, component: UserProfile}, 25 {path: ‘/user/list‘, component: UserList}, 26 ] 27 } 28 ] 29 });
说明：主要在路由配置中增加了 children 数组配置，用于在该组件下设置嵌套路由
接着上一节的代码，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：
1 <template> 2 <div> 3 <el-container> 4 <el-aside width="200px"> 5 <el-menu :default-openeds="[‘1‘]"> 6 <el-submenu index="1"> 7 <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template> 8 <el-menu-item-group> 9 <el-menu-item index="1-1"> 10 <router-link to="/user/profile">个人信息</router-link> 11 </el-menu-item> 12 <el-menu-item index="1-2"> 13 <router-link to="/user/list">用户列表</router-link> 14 </el-menu-item> 15 </el-menu-item-group> 16 </el-submenu> 17 <el-submenu index="2"> 18 <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template> 19 <el-menu-item-group> 20 <el-menu-item index="2-1">分类管理</el-menu-item> 21 <el-menu-item index="2-2">内容列表</el-menu-item> 22 </el-menu-item-group> 23 </el-submenu> 24 </el-menu> 25 </el-aside> 26 <el-container> 27 <el-header style="text-align: right; font-size: 12px"> 28 <el-dropdown> 29 <i class="el-icon-setting" style="margin-right: 15px"></i> 30 <el-dropdown-menu slot="dropdown"> 31 <el-dropdown-item>个人信息</el-dropdown-item> 32 <el-dropdown-item>退出登录</el-dropdown-item> 33 </el-dropdown-menu> 34 </el-dropdown> 35 <span>Lusifer</span> 36 </el-header> 37 <el-main> 38 <router-view /> 39 </el-main> 40 </el-container> 41 </el-container> 42 </div> 43 </template> 44 <script> 45 export default { 46 name: "Main" 47 } 48 </script> 49 <style scoped lang="scss"> 50 .el-header { 51 background-color: #B3C0D1; 52 color: #333; 53 line-height: 60px; 54 } 55 .el-aside { 56 color: #333; 57 } 58 </style>
说明：
<el-main> 元素中配置了 <router-view /> 用于展示嵌套路由<router-link to="/user/profile">个人信息</router-link> 展示嵌套路由内容标签：lang 代码 header sub theme 效果 内容 配置文件 图片
原文地址：https://www.cnblogs.com/xianquan/p/12492566.html
