在Nuxt.js中是否可以具有相同级别层次结构的多个路由参数?

Question

在Nuxt.js中是否可以具有相同级别层次结构的多个路由参数？ 例如：

- entry
-- _id.vue
-- _slug.vue
- index.js

Answer 1

不，这是不可能的。

但是您可以使用一个简单的解决方法。

案例1

您需要在同一路线上同时_id和_slug。然后你可以简单地嵌套它们。因此，您的路线将如下所示：entry/_id/_slug.您的文件将如下所示：

entry/
--| _id/
-----| index.vue //this one is for _id
-----| _slug/
--------| index.vue //this one is for _slug

您也可以_id与_slug交换，如果它更适合您的需求。

案例2

您需要两条不同的路线：entry/id/_id和entry/slug/_slug。在这种情况下，您的文件将如下所示：

entry/
--| id/
-----| _id.vue
--| slug/
-----| _slug.vue

Answer 2

使用 Nuxt3，对于像这样的 URLmywebsite.com/param1/param2/param3，您需要以下结构：

pages
└── [param1]
└── [param2]
└── [param3].vue

要在控制台中显示它，请将其放在[param3].vue

<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params);
</script>

参考 https://nuxt.com/docs/guide/directory-structure/pages#nested-routes