Vue 0基础学习路线（20）—— 图解深度详述vue的嵌套路由和添加路由与子路由、children属性和子路由视图及详细案例（附详细案例代码解析过程及版本迭代过程）_vue子路由视图

1. 重点提炼

• 嵌套路由
  • 添加路由与子路由
    • children 属性
  • 子路由视图

2. 嵌套路由

一些比较复杂的应用会有多层嵌套的路由和组件组成

在应用增加一个用户个人中心，用户中心又是由多个页面组成，即进入用户中心侧边栏又有导航，如：

3. 添加路由与子路由

...
import User from './views/User.vue'
import Profile from './views/User/Profile'
import Cart from './views/User/Cart'
...

...
{
  path: '/user',
  component: User,
  children: [
		{
			path: '',
			name: 'user',
			component: Profile
		},
    {
      path: 'cart',
      name: 'user-cart',
      component: Cart
    }
  ]
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.1 children 属性

一个路由中的 children 表示嵌套的子路由

• 子路由的 path 如果以 / 开头表示根路径，不再基于父级路径，否则基于父级 path
• 如果一个子路由的 path 为空，表示为默认子路由
• 如果一个路由有默认子路由，则父级 name 属性需要设置给这个默认子路由

4. 子路由视图

有了子路由以后，还需要在视图组件中设置 router-view

// User.vue
<template>
    <div>
        <h3>用户中心</h3>
        <ul class="left">
            <router-link exact tag="li" :to="{name: 'user'}">基本信息</router-link>
            <router-link tag="li" :to="{name: 'user-cart'}">我的购物车</router-link>
        </ul>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped>
.left {
    float: left;
    width: 200px;
}
.left li {
    line-height: 30px;
    cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

5. 实例

实现用户页面的子导航

5.1 example01

\app\src\views\User\Profile.vue

<template>
    <div>
        Profile
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

\app\src\views\User\Cart.vue

<template>
    <div>
        Cart
    </div>
</template>

<script>
    export default {
        name: "Cart"
    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

\app\src\router\index.js

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
        {
            path: '/view/:id',
            name: 'view',
            component: Detail
        },
        {
            path: '/user',
            name: 'user',
            component: User
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/user/profile',
            name: 'userProfile',
            component: Profile
        },
        {
            path: '/user/cart',
            name: 'userCart',
            component: Cart
        }
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

\app\src\views\User.vue

<template>
    <div>
        <h3>用户中心</h3>
        <ul class="left">
            <router-link exact tag="li" :to="{name: 'userProfile'}">基本信息</router-link>
            <router-link tag="li" :to="{name: 'userCart'}">我的购物车</router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style scoped>
    .left {
        float: left;
        width: 200px;
    }
    .left li {
        line-height: 30px;
        cursor: pointer;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

显示得跟我们的需求不太一致，切换之后，会把整个用户中心的导航内容覆盖了。

因为我们配的路由都在顶层，即一个层上，没有嵌套关系的。

因此它不是嵌套显示在User页面，而是App.vue的router-view中。

但是我们想实现的是嵌套在User页面，并能够显示User的导航页面。

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.99
Branch： branch05

commit description：a1.99（example01——用户页面子导航-覆盖问题）

tag：a1.99

5.2 example02

{
            path: '/user',
            name: 'user',
            component: User,
            children: [
                {
                    // 上一层的path拼到这一层的path，类似层层继承关系
                    path: 'profile',
                    name: 'userProfile',
                    component: Profile
                },
                {
                    // 上一层的path拼到这一层的path，类似层层继承关系
                    path: 'cart',
                    name: 'userCart',
                    component: Cart
                }
            ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

为啥显示没有效果呢？

路由的层级反映在页面当中，也需要对应router-view的层级，而顶层的router-view是需要满足顶层路由配置的。

而这里的嵌套子路由，而显示对应的user页面的router-view里面。因此需要再user页面中增加一个router-view组件（让其显示在页面右侧）。

因此路由有嵌套，router-view视图也是有嵌套对应关系的。

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.01
Branch： branch05

commit description：a2.01（example02——修改为子路由但没有效果）

tag：a2.01

5.3 example03

\app\src\views\User.vue

<template>
    <div>
        <h3>用户中心</h3>
        <ul class="left">
            <router-link exact tag="li" :to="{name: 'userProfile'}">基本信息</router-link>
            <router-link tag="li" :to="{name: 'userCart'}">我的购物车</router-link>
        </ul>

        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style scoped>
    .left {
        float: left;
        width: 200px;
    }
    .left li {
        line-height: 30px;
        cursor: pointer;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

注意：嵌套子路由的path，设置不要加/，如：'/cart'就代表直接'/cart'（代表根路径访问模式了）访问了，而不是'/user/cart'了。

因此设置不要加/，默认就进行（继承上面的拼接形式了）子路径拼接了。

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.02
Branch： branch05

commit description：a2.02（example03——实现子路由切换）

tag：a2.02

5.4 example04

还有一个问题，我们点击User，子导航视图是空白一片，有些时候可以这样做，具体看需求。假如现在需求要求。

我们点击User，子页面默认跳转到基本信息里面。这个时候就需要配置默认路由了。

{
         // 上一层的path拼到这一层的path，类似层层继承关系
         // ''就代表默认路径
         path: '',
         name: 'userProfile',
         component: Profile
},
1
2
3
4
5
6
7

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.03
Branch： branch05

commit description：a2.03（example04——实现子路由切换-子页面默认跳转到基本信息）

tag：a2.03

（后续待补充）