VueRouter 嵌套路由

Posted 2020-11-26 xianquan

什么是嵌套路由

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

1. /user/foo/profile /user/foo/posts
2. +------------------+ +-----------------+
3. | User | | User |
4. | +--------------+ | | +-------------+ |
5. | | Profile | | +------------> | | Posts | |
6. | | | | | | | |
7. | +--------------+ | | +-------------+ |
8. +------------------+ +-----------------+

创建嵌套视图组件

创建嵌套视图组件

用户信息组件

在 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>

View Code

说明：

• 在 <el-main> 元素中配置了 <router-view /> 用于展示嵌套路由
• 主要使用 <router-link to="/user/profile">个人信息</router-link> 展示嵌套路由内容