nuxt 3 动态路由关键点总结

Nuxt3 本身是基于文件的路由，即根据pages目录下的文件自动进行路由。

方括号

所谓动态路由，即可以根据$route.params 获取路径中的不同参数，当你把任何文件或文件夹放置于方括号[]中时,将自动生成动态路由。

例如：

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

对于上述文件结果，在模版文件中可以通过以下方式获取 group 和 id.

//  pages/users-[group]/[id].vue
<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

双方括号

如果你希望参数是可选的，可以使用双方括号。

~/pages/[[slug]]/index.vue or ~/pages/[[slug]].vue 这两种情形，都会匹配 / and /test.

上述规则务必要好好理解。

同时，目录下的 index.vue, 默认是匹配该目录，例如~/pages/course/index.vue 会匹配 /course 路由。

捕获所有路由

如果你希望捕获所有路由，可以将文件命名为[...slug].vue 样式。

例如，对 pages/course/[...slug].vue 会同时匹配 /course/list 或 /course/list/123 路由, 而且可以通过{{ $route.params.slug }} 获取到相关参数。

路由优先级

命名路由的优先级会高于动态路由。
例如：
对于 /foo/hello 路由, ~/pages/foo.vue 会优先于 ~/pages/foo/[slug].vue.

而 ~/pages/foo/index.vue and ~/pages/foo/[slug].vue 会分别匹配 /foo 和 /foo/hello.

实战

如果我们想通过/course 展示课程列表，通过/course/nuxt 或 /course/golang 动态展示具体的课程，该如何设计路由呢？

❎ 错误的方式

-| pages/
---| course.vue
---| course/
-----| [name].vue

因为，上述 /course/nuxt 会展示和 /course 一样的内容，即实际生成的是嵌套路由。

✅ 正确的方式

-| pages/
---| course/
-----| index.vue
-----| [name].vue

因为，index.vue 为命名路由，优先级较高，因此 /course 会匹配 pages/course/index.vue 文件。
而， /course/nuxt 为匹配 pages/course/[name].vue 文件