[羊腿]初识Nuxt3(二)上文我们看到了pages下怎么配置基本的页面路由，继续通配路由如果需要一个通配路由，可以

「时光不负，创作不停，本文正在参加2021年终总结征文大赛

承接上文, 初识Nuxt3(一)

上文我们看到了pages下怎么配置基本的页面路由，继续

通配路由

如果需要一个通配路由，可以使用一个名为[…slug].vue的文件来创建它。这将匹配该路径下的所有路由，因此它不支持任何非动态文本。

先创建一个目录

-| pages/
---| [...slug].vue
---| index.vue
---| admin.vue

当我们url是/的时候，会匹配到index.vue这个路由组件

当我们url是/admin的时候，会匹配到admin.vue这个路由组件

当我们url是/aaa /bbb /ccc的时候就会匹配到 [...slug].vue这个组件

当然[...slug].vue 文件名里的...slug 可以是[x].vue , [y].vue

[] 方括号内可以是任意的

在[..slug].vue文件里我也可以使用$route.params.slug 获取到未匹配到/ /admin的url, 但是他没有匹配 /x/x 这样的url

在pages目录下我尝试创建了[...slug].vue [a].vue [x].vue 通配他会匹配到一个[]的.vue文件，所有通配路由组件一个目录下只创建一个就好了

添加一个user文件夹

-| pages/
---| user/
    ---| [x].vue
    ---| index.vue
---| [...slug].vue
---| index.vue
---| admin.vue

访问/user匹配/user/index.vue组件
访问/user/info 会匹配 /user/[x].vue组件
假设我们删除掉 [x].vue文件访问/user/info 则会出现 404页面

通配路由没法完全替代 路由错误 的页面

嵌套路由

Nuxt3 用 <NuxtChild>替代vue-rotuer的<RouterView>

通过pages目录下的文件

-| pages/
---| parent/
------| child.vue
---| parent.vue

Nuxt 会生成相对应的路由配置

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

在父子路由的关系中我们需要按照下面的来写，展示child.vue组件时，必须在pages/parent.vue中插入<NuxtChild>组件:

<template>
  <div>
    <h1>这里是 parent component</h1>
    <NuxtChild />
  </div>
</template>

总结

当我们用Nuxt3来配置路由的时候，按照Nuxt3 pages 的约定来构建 Nuxt3 会帮助我们生成相应的路由config

pages下文件名匹配我们的path, [参数] 对应 :参数
文件名也匹配vue-router里的name
- 有参数的时候： [] 装换成 - /user/[info].vue 对应的生成的name就是 user-info
<NuxtLink> <NuxtChild> 专属的组件
通配路由可以匹配当前目录下未匹配到的所有路径

[羊腿]初识Nuxt3(二)

通配路由

先创建一个目录

添加一个user文件夹

导航

嵌套路由

总结