一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：
/film/playing
/film/coming
同一个组件，但是在不同的url下嵌套不同的子组件
通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。实现这种功能，可以使用在路由定义中使用children
更改上一篇中的router ，在/film中添加children
const routes = [
{
path: "/film",
component: Film,
children: [
{
path:"/film/playing",
component:Playing
},
{
path:"/film/coming",
component:Coming
}
]
},
{
path: "/center",
component: Center
},
{
path: "/cinema",
component: Cinema
},
{
path:'/',
redirect:'/film'
}
]同时在film组件中添加导航router-link与路由容器router-view
<template>
<div class="filmsbar">
Films
<ul>
<router-link custom to="/film/playing" v-slot="{isActive, navigate}">
<li @click="navigate" :class="isActive?'filmeactive':''">Playing</li>
</router-link>
<router-link custom to="/film/coming" v-slot="{isActive, navigate}">
<li @click="navigate" :class="isActive?'filmeactive':''">Coming</li>
</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<style scoped>
.filmsbar {
position: fixed;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
.filmsbar ul {
display: flex;
list-style: None;
}
.filmsbar ul li {
flex: 1;
}
.filmeactive {
color: red;
}
</style>
在views中添加两个视图vue作为playing与coming
效果如图
注意：
children中path如果不是以/开头，则会认为是相对于父级的相对路径
如果以/开头，则认为是绝对路径
例如将/film相关路由修改为
{
path: "/film",
component: Film,
children: [
{
path:"/playing", // 匹配/playing
component:Playing
},
{
path:"coming", // 匹配 /film/coming
component:Coming
}
]
},访问/playing
访问/film/coming
