与 Nuxt.js 同级的静态和动态路由答案

【问题标题】：Static and dynamic routes on the same level with Nuxt.js与 Nuxt.js 同级的静态和动态路由
【发布时间】：2022-07-11 21:34:04
【问题描述】：

我正在尝试在站点 (Nuxt.js) 上设置路由，使用 @nuxtjs/router 创建我自己的 router.js 文件。面临将动态和静态路由定位在同一级别的问题。我有这样的结构：

/:蛞蝓
/联系人

打开 /contacts 使用 slug "contacts" 获取错误页面

改变结构例如 /hotels/:slug 不是我的情况的出路。所以.. 我怎样才能做到这一点？有没有办法设置路线的优先级。往extendRoutes的方向挖，没有结果。

【问题讨论】：

【解决方案1】：

试试这个：创建一个名为 contacts 的文件夹在名为 index.vue 的文件夹中创建一个文件。现在在与index.vue 相同的级别创建另一个名为_slug.vue 的文件。

会是这样的：

--contacts
|--- _slug.vue
|--- index.vue

现在/contacts/ 路线将打开index.vue 和contacts/something 以something 作为一个slug 打开_slug.vue。

【讨论】：

不幸的是，它不是一条出路，因为我需要在同一级别上的多个静态路由和动态路由。例如，路由“/contacts”应该打开一个页面，路由“/features”另一个页面，“/”e.x“/hotel1”或“/abracadabra”之后的所有其他变体应该打开另一个页面 - 所有其他变体都一样 -带有 slug 的动态页面。
您找到解决方案了吗？我有同样的问题，以前没有发生过。它发生在更新 Nuxt.js 几个小版本之后。

【解决方案2】：

你应该把你的静态页面放在他们自己的文件夹中，里面有他们自己的 index.vue 示例：

_slug
    index.vue
features
    index.vue
contacts
    index.vue

【讨论】：