13.Vue路由嵌套

1.什么是路由嵌套

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

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

2.使用

1.在views中创建user目录，user目录下创建用户信息组件Profile.vue

 1 
 4 
 5 
10 
11 

2.在user目录下创建用户列表视图组件List.vue

 1 
 4 
 5 
10 
11 

3.修改router目录下的index.js路由配置管理文件

说明：主要在路由配置中增加了 children 数组配置，用于在该组件下设置嵌套路由

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 import Login from "../views/Login"
 5 import Main from '../views/Main'
 6 
 7 
 8 import UserProfile from "../views/user/Profile"
 9 import UserList from '../views/user/List'
10 
11 Vue.use(Router);
12 
13 export default new Router({
14   routes: [
15     {
16       // 登录页
17       path: '/login',
18       name: 'Login',
19       component: Login
20     },
21     {
22       // 首页
23       path: '/main',
24       name: 'Main',
25       component: Main,
26       // 配置嵌套路由
27       children: [
28         {
29           path: '/user/profile',
30           component: UserProfile
31         },
32         {
33           path: '/user/list',
34           component: UserList
35         }
36       ]
37     }
38   ]
39 });

4.修改首页视图Main.vue

说明：

　　在 元素中配置了 用于展示嵌套路由,主要使用 个人信息 展示嵌套路由内容

 1 
48 
49 
54 
55