文章目录
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
(后续待补充)