vue.js - 使用文件夹的动态路由中的可选 slug

Question

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

为此，按照文档，我将所有页面移动到一个_lang文件夹中，为我提供了以下架构：

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

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

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

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

<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>