在 Nuxt Router 中动态选择组件

Question

我想为所有语言呈现相同的组件。翻译将在组件内部完成。 url 和组件的关系应该是这样的：

pseudocode:
browserurl: "/blogpost_1"
nuxtcomponent: "blogpost_1"

browserurl: "/en/blogpost_1"
nuxtcomponent: "blogpost_1"

browserurl: "/randompage"
nuxtcomponent: "randompage"

browserurl: "/en/randompage"
nuxtcomponent: "randompage"

我的方法是执行以下操作，不幸的是我找不到访问 pathMatch 的方法。

router: {
   extendRoutes(routes, resolve){
   routes.push({
     path: 'en/*',
     component: resolve(__dirname, '/' + somehow.access.pathMatch )
})
}

}

Answer 1

我认为您不能动态解析组件。 component: 需要组件实例或 Promise。一旦 promise 解决，结果就会被缓存。我可以想象使用导航防护和“手动”切换组件的解决方案，但这需要手动导入视图等。

所以最好的办法是重写 nuxt 生成的路径以包含可选路径段（从 /about 到 /:lang(en|jp)?/about，因此它接受像 /en/about 这样的路径） - 然后你的组件接收 lang 参数，该参数将为空对于/about，否则它将包含语言....

1. 在meta 中定义可用的翻译
2. 用翻译重写页面路径

在您的页面中：

<script>
export default {
  meta: {
    translations: ['en', 'jp']
  }
}
</script>

在 Nuxt 配置中（伪 - 未测试）

router: {
    extendRoutes(routes, resolve) {
        const routesWithTranslation = routes.filter(i => i.meta.translations && i.meta.translations.length > 0);

        routesWithTranslation.forEach(route => {
            const segment = `/:lang(${route.meta.translations.join("|")})?`
            route.path = segment + route.path           
        })
}