学习nuxt笔记六-嵌套路由

41 阅读1分钟

学习视频:www.bilibili.com/video/BV11W…

1. 基本结构

在 Nuxt 中,嵌套路由需要遵循特定的文件夹结构:

image.png

2. 具体示例

新建一个user文件

image.png

输入路由 可以看见user.vue 嵌套了user目录下的路由 注意父路由要写NuxtPage

image.png

3. 访问路径

  • /user - 会显示 user.vue 的布局,并在 <NuxtPage /> 位置显示 index.vue 的内容

  • /user/??? - 会显示 user.vue 的布局,并在  位置显示 命名路由 的内容

4. 与其他路由结合使用

image.png

5. 嵌套路由父子路由的执行过程 先执行父路由setup函数 在执行子路由的setup函数

image.png

image.png

image.png