Nuxt 3 多路径访问同一页面的三种方式：重定向、别名与动态路由

今天看到有小伙伴在Nuxt 3文中社区群里问到这个问题，那就顺便写一篇文章来回答，并且重温一下Nuxt3的路由。

Nuxt 3 多路径访问同一页面

在 Nuxt 3 中，如果你想让两个不同的路径访问同一个页面，有以下几种实现方式：

重定向方式：在其中一个路径中使用 navigateTo 方法重定向到目标页面。
路由别名：在 nuxt.config.ts 中配置路由别名或重定向，让两个路径指向同一页面。
动态路由参数：使用动态路由 [slug].vue，让多个路径共用一个页面，并根据参数进行不同处理。

方法 1: 重定向

你可以使用 Nuxt 的 navigateTo 方法，在其中一个路径中进行重定向。

在 pages/ 目录中创建两个文件，一个是实际页面，另一个用于重定向。例如：

pages/pageA.vue
pages/pageB.vue

在 pages/pageB.vue 中添加重定向逻辑：

<script setup>
import { navigateTo } from '#app'

navigateTo('/pageA')
</script>

方法 2: 动态路由和别名

你可以使用动态路由或路由别名，在 nuxt.config.ts 中配置别名，让两个路径访问同一个页面。

export default defineNuxtConfig({
  pages: true,
  routeRules: {
    '/pageB': { redirect: '/pageA' },
  }
})

或者手动配置路由别名：

export default defineNuxtConfig({
  pages: true,
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/pageB',
        alias: '/pageA',
        component: resolve(__dirname, 'pages/pageA.vue'),
      })
    },
  },
})

方法 3: 动态路由参数

你也可以通过动态路由参数的方式，使用同一个页面来处理多个路径。例如，pages/[slug].vue：

/pageA 和 /pageB 都会访问同一个 pages/[slug].vue 页面。

pages/[slug].vue 中你可以根据路由参数来进行不同的处理：

<script setup>
import { useRoute } from '#app'

const route = useRoute()
const slug = route.params.slug
</script>

<template>
  <div>
    <h1>{{ slug }} 页面内容</h1>
  </div>
</template>

这样 /pageA 和 /pageB 都会显示相同页面，并且你可以通过 slug 参数来定制显示内容。

Nuxt3 路由知识点回顾

温故而知新，Nuxt 3 的路由系统是基于文件系统的，并且在实际项目中使用时，有一些重要的概念和知识点值得注意。下面是一些关键的 Nuxt 3 路由知识点：

1. 文件系统路由

Nuxt 3 使用基于文件系统的路由，不需要手动定义路由，所有的页面都自动根据 pages/ 目录的文件结构生成。

pages/index.vue -> /
pages/about.vue -> /about
pages/user/index.vue -> /user
pages/user/profile.vue -> /user/profile

2. 动态路由

通过使用方括号 [param] 定义动态路由参数。

pages/user/[id].vue -> /user/:id
在组件中可以通过 useRoute() 来获取动态参数：
```
const route = useRoute()
const userId = route.params.id
```

3. 嵌套路由

在 pages 文件夹中可以通过文件夹结构实现嵌套路由。

pages/user/index.vue -> /user
pages/user/profile.vue -> /user/profile
pages/user/settings.vue -> /user/settings

嵌套视图可以通过 NuxtPage 组件展示子路由内容：

<template>
  <NuxtPage />
</template>

4. 动态嵌套路由

支持带有动态参数的嵌套路由：

pages/user/[id]/profile.vue -> /user/:id/profile

5. 404 页面

要自定义 404 页面，可以创建 pages/404.vue 文件。它会在没有匹配到任何路由时自动显示。

6. 路由别名

通过在 nuxt.config.ts 中配置 alias 来定义多个路径访问同一页面：

export default defineNuxtConfig({
  routeRules: {
    '/about-us': { alias: '/about' },
  }
})

7. 中间件

Nuxt 3 支持页面和路由级的中间件，用于在路由进入之前执行逻辑。可以通过 middleware 文件夹创建中间件，或者在页面组件中定义局部中间件。

在 middleware/auth.ts 中定义中间件：

export default defineNuxtRouteMiddleware((to, from) => {
  // 如果未登录，则跳转到登录页面
  if (!isAuthenticated()) {
    return navigateTo('/login')
  }
})

在页面中使用：

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

8. 路由重定向

可以在 nuxt.config.ts 中配置路由重定向：

export default defineNuxtConfig({
  routeRules: {
    '/old-page': { redirect: '/new-page' },
  }
})

9. 全局路由守卫

可以通过 app/router.options.ts 配置全局的路由守卫，类似于 Vue Router 的 beforeEach 钩子。

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.$router.beforeEach((to, from, next) => {
    // 全局路由守卫逻辑
    next()
  })
})

10. 异步数据获取

Nuxt 3 提供 useAsyncData 和 useFetch 用于路由页面的数据获取。这些方法会在路由切换时自动调用，确保数据在页面渲染前获取。

const { data, error } = await useAsyncData('userData', () => $fetch(`/api/user/${route.params.id}`))

11. 静态路由与动态路由结合

Nuxt 3 的路由系统可以同时支持静态和动态路由，因此你可以结合这两种路由类型来设计复杂的路由逻辑。例如：

pages/products/[id].vue -> /products/:id
pages/products/special-offers.vue -> /products/special-offers

Nuxt 3 多路径访问同一页面的三种方式：重定向、别名与动态路由