DAY20240908 VUE:一文带你了解Vue 中的嵌套路由

VUE:嵌套路由

• 一、嵌套路由
• • 目录新建文件夹：体现嵌套关系。
  • Films.vue文件变化
  • index.js文件变化
• 二、嵌套路由和二级路由的关系
• 三、参考

一、嵌套路由

何谓嵌套路由，参考如下：
上面有一个大的轮播图，下面一个二级的声明式导航，可以切换二级选项卡，此时只有二级路径在变，轮播图保持不变，二级选项卡也保持不变。只要底下的列表切换。也就是Fimls组件Nowplaying组件是主从关系；Fimls组件和Comingsoon组件是主从关系

目录新建文件夹：体现嵌套关系。

新建文件夹叫films，下面放nowplaying和Comingsoon。由此体现了父子关系。

在两个组件里 分别加入两行内容。

Films.vue文件变化

Films.vue中大轮播和二级导航（不变的部分）line3-7
Films.vue中引入路由容器 line9

index.js文件变化

代码：14-23 children:[{},{}]这样的格式。

index.js中引入组件的路径 line4-5

测试结果如下：发现切换成功。


润色：要加入重定向，使它一进来就是正在热映选项卡。此时我们的重定向应该放在刚刚的childern里面。（注意改的不是最外面的重定向，而是放在了childern里面。）只需要改这一个地方就可以了，其他的方法容易漏掉路径的重定向。line24-27

二、嵌套路由和二级路由的关系

路径是二级关系，实际上也是父子关系---->嵌套路由
路径是二级关系，实际上也是兄弟关系----->二级路由，但不是嵌套路由

三、参考

https://www.bilibili.com/video/BV17z4y1D7Yj/?p=505&spm_id_from=333.880.my_history.page.click