使用文件夹的动态路由中的可选 slug

Question

我目前正在使用 Vue.js 和 Nuxt 框架对网站进行内部化。我正在从页面的 url 变为 website.com/my-page 到 website.com/<lang>/my-page。

为此，按照 documentation，我将所有页面移动到 _lang 文件夹中，得到以下架构：

pages/
│
└───_lang
│     │ 
|     |__ my-page.vue
|
...

这完全符合预期，除了 <lang> slug 现在是强制性的，使得对 website.com/my-page return 的访问成为 404。

我希望此 url 以我的应用程序中声明的默认语言显示页面。

我发现实现此目的的唯一方法是在 pages/ 的根目录下创建另一个 my-page.vue，其中包含以下内容：

<script>
import Mypage from '~/pages/_lang/my-page'
export default Mypage
</script>

然而，这意味着为我网站的每个页面创建这种别名，给我：

pages/
│
│─── my-page.vue
│
└───_lang/
│     │ 
|     |__ my-page.vue
|
...

有什么方法可以使这个过程自动化，因为这是一个非常乏味的过程？

谢谢，

旁注：我一直在调查 extendRoutes 但没有成功。

Answer 1

您可以使用 router-extras-module 模块。

<router>
    alias:
        - /my-page
</router>

Optional slug in dynamic route using a folder