前言

上一章节我们介绍过了Nuxt3的布局方式，这一章我们介绍下Nuxr3的路由实现方式。

动态路由

Nuxt3路由的实现需要在根路径下创建pages文件夹，默认加载index.vue作为/路径入口文件，现在在pages下创建left.vue文件。

目录结构和代码如上图，此时输入http://localhost:3000/left 即可访问到left.vue页面。

路由传参

现在我们希望往路由中传入text参数，需要构建pages/left/[text].vue这样的目录结构， 然后在[text].vue中编写代码如下：

<template>
    <div style="height:500px;background:yellow;">
      {{$route.params.text}}
    </div>
</template>

访问http://localhost:3000/left/abc

注意：此时需要删除pages目录下的left.vue,否则路由只会匹配到第一个匹配到的/left。如果像保持两个路由同时存在，需要使用嵌套路由。

视图如下：

接下来使用两个按钮来完成路由的切换。

路由导航

在/pages/index.vue中修改成如下代码，需要在路由切换的组件或标签外围包裹组件NuxtLink,其使用类似router-link。

<template>
<NuxtLayout>
<NuxtLayout name="custom">
    <div>
      <NuxtLink to="/left">
        <button style="width:100%;height:500px;">left</button>
      </NuxtLink>
    </div>
    <div>
      <NuxtLink to="/right">
        <button  style="width:100%;height:500px;">right</button>
      </NuxtLink>
    </div>
  </NuxtLayout>
</NuxtLayout>
</template>

<script>
export default {
 layout: false
}
</script>

pages/right.vue代码如下：

<template>
    <div style="height:500px;background: red;">
      Right
      <NuxtChild></NuxtChild>
    </div>
</template>

注意：别忘了添加/pages/left.vue文件

嵌套路由

嵌套路由也就是实现子路由，在保留有上一级路由加载组件存在的前提下，通过切换url只改变子路由视图。构建/pages/left/[text].vue的目录结构。 left.vue代码如下修改，增加内置组件NuxtChild。

left.vue:

<template>
  <div>
    <div style="height:500px;background:yellow;">
      left页面
    </div>
    <NuxtChild></NuxtChild>
  </div>
</template>

/pages/left/[text].vue:

<template>
    <div style="height:500px;background:yellow;">
      子路由页面{{$route.params.text || '默认文本'}}
    </div>
</template>

访问http:localhost:3000/left/abc 视图如下。

总结

/pages下[]是Nuxt3.js的路由传参命名规范，/pages下的文件夹命名构成URL的命名， NuxtChild组件类型Vue-Router中的router-view，作为子路由入口，NuxtLink类似Vue-Router中的router-link,下一章我们介绍components文件夹的使用。