文章目录
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
}
]
}
...
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>
5. 实例
实现用户页面的子导航
5.1 example01
\app\src\views\User\Profile.vue
<template>
<div>
Profile
</div>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>
\app\src\views\User\Cart.vue
<template>
<div>
Cart
</div>
</template>
<script>
export default {
name: "Cart"
}
</script>
<style scoped>
</style>
\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
}
]
});
\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>
显示得跟我们的需求不太一致，切换之后，会把整个用户中心的导航内容覆盖了。
因为我们配的路由都在顶层，即一个层上，没有嵌套关系的。
因此它不是嵌套显示在User页面，而是App.vue的router-view中。
但是我们想实现的是嵌套在User页面，并能够显示User的导航页面。
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.99
Branch： branch05commit 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
}
]
}
为啥显示没有效果呢？
路由的层级反映在页面当中，也需要对应router-view的层级，而顶层的router-view是需要满足顶层路由配置的。
而这里的嵌套子路由，而显示对应的user页面的router-view里面。因此需要再user页面中增加一个router-view组件（让其显示在页面右侧）。
因此路由有嵌套，router-view视图也是有嵌套对应关系的。
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.01
Branch： branch05commit 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>
注意：嵌套子路由的path，设置不要加/，如：'/cart'就代表直接'/cart'（代表根路径访问模式了）访问了，而不是'/user/cart'了。
因此设置不要加/，默认就进行（继承上面的拼接形式了）子路径拼接了。
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.02
Branch： branch05commit description：a2.02（example03——实现子路由切换）
tag：a2.02
5.4 example04
还有一个问题，我们点击User，子导航视图是空白一片，有些时候可以这样做，具体看需求。假如现在需求要求。
我们点击User，子页面默认跳转到基本信息里面。这个时候就需要配置默认路由了。
{
// 上一层的path拼到这一层的path，类似层层继承关系
// ''就代表默认路径
path: '',
name: 'userProfile',
component: Profile
},
参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.03
Branch： branch05commit description：a2.03（example04——实现子路由切换-子页面默认跳转到基本信息）
tag：a2.03
（后续待补充）