Nuxt3 中的动态路由

Question

您将如何管理如下所示的 url 结构？

我正在将一个项目迁移到 Nuxt3，我想了解是否可以避免管理重定向。

/fashion

博客类别时尚

/fashion/page-3

博客类别时尚页面3

/fashion/35/cool-article

来自博客类别时尚的博客文章，ID 为 35，别名为“cool-article”

我遇到的主要问题是博客类别是动态的，但还有其他动态路由，我不想要一个通用的“包罗万象”的 vue 文件来处理所有内容，而且我也想避免加载所有可能的路由.

Answer 1

对于您列出的路线，我将在 Nuxt 的专用

/page

目录中创建以下结构：

-| pages/
---| [category]/
------| [item]/
---------| [alias].vue
------| page-[page].vue
------| index.vue

1. /pages/[category]/index.vue

   看起来像这样：

<template>
  <div>
   <CategoryShow :category="category" :page="1" />
  </div>
</template>

<script setup>
const category = useRoute().params.category
</script>

这将触发

/fashion

路由（如果没有其他定义的路由匹配，名为“index”的页面始终是默认回退）。在 Nuxt 内置

useRoute()

可通过其

params

数组进行组合的内部，有动态参数的当前值。 Nuxt 根据方括号内的部分路由自动填充该数组。提取的值将作为道具传递到专用的

/components/Category/Show.vue

文件中。在这里你可以处理显示。

我假设“页面”的默认值。但也可以在组件内将 prop 设为可选，并在此处省略它。

2. /pages/[category]/page-[page].vue

   看起来完全一样，只是它也处理页面：

<template>
  <div>
   <CategoryShow :category="category" :page="page" />
  </div>
</template>

<script setup>
const category = useRoute().params.category
const page = useRoute().params.page
</script>

这将消耗

/fashion/page-3

路线。在这种情况下，

category

的值将为

fashion

，

page

的值将为

3

。

3. /pages/[category]/[item]/[alias].vue

   将是：

<template>
  <div>
   <ArticleShow :item="item" />
  </div>
</template>

<script setup>
const item = useRoute().params.item
</script>

我相信你只需要

item

部分路线来识别和显示所需的文章，但这样写它会捕获所有可能的路线，如

/fashion/35/cool-article

。如果您出于某种原因需要参数

category

和

alias

将可用。

这就是我处理给定路线示例的方式。但既然你提到“其他动态路线”，我不确定这是否是正确的方法。但我通常会尝试让我的所有内容与

/page

目录的内容相匹配，因为像这样 Nuxt 为我提供了强大且相当复杂的开箱即用路由，几乎不需要付出任何努力。

如果您需要更多，还有

useRouter()

composbale，它包装了底层 VueRouter 并允许与路由进行手动交互。