Vue3 Nuxt3(一)路由的使用

在Nuxt3中使用路由

Nuxt路由基于vue-router，根据文件名从pages/目录中创建的每个组件生成路由。

1. 创建路由 只需要在pages目录中建立文件层级关系,Nuxt会自动创建路由表。

这个文件系统路由使用命名约定来创建动态的嵌套路由:
目录层级如下

pages/
--| about.vue
--| posts/
----| [id].vue

那么该文件系统对应的路由 表如下:

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]

2. 使用路由

在模板中使用 <NuxtLink/>标签 设置跳转的路径

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

3. 使用路由传递参数

参数传递在创建vue文件时, 命名为 xxx[id]xxx.vue 则读取参数使用route.params.id, 代码如下

<script setup>
const route = useRoute()
// 当访问的路径是 /posts/3  时, route.params.id 的值是 3
console.log(route.params.id)
</script>

当然可以传递多个参数,只需要命名vue文件时配置多个[paramsName], 使用不同的参数名称

4.嵌套路由 使用 <NuxtPage>

如果需要在 同一个vue 页面中使用路由切换页面中的部分内容, 如下图所示的这种需求,则可以使用嵌套路由

4.1 在pages目录中创建与需要使用嵌套路由的页面同名的目录

比如要在about.vue页面上使用嵌套路由,先创建about目录,然后再about目录下创建vue文件, 文件目录结构如下

pages/
--| about.vue
--| about/
----| a.vue
----| b.vue
----| c.vue
--| posts/
----| [id].vue

4.2 在about.vue中使用 <NuxtPage>标签

about.vue

<template>
    <div>
        <nuxt-link to="/about/a">显示a页面</nuxt-link>
        <nuxt-link to="/about/b">显示b页面</nuxt-link>

        <NuxtPage></NuxtPage>
    </div>
</template>

点击路由切换按钮, a页面或b页面就会显示在<NuxtPage>标签所在的位置

注意: 按此路由表的配置, 不能访问 /about 路径, 如果需要使 /about 路径可以访问, 需要如下配置

pages/
--| about.vue
--| about/
----| index.vue
----| a.vue
----| b.vue
----| c.vue
--| posts/
----| [id].vue

此时再访问 /about 路径时, 会将 about 目录下的 index.vue 展示到 about.vue 中的 <NuxtPage>标签上