我正在尝试创建一个路由来为所有路由添加语言环境前缀,我使用以下代码让它工作:
routes: [{
path: '/:lang',
component: {
template: '<router-view />'
},
children: [
{
path: '',
name: 'home',
component: Home
},
{
path: 'about',
name: 'about',
component: About
},
{
path: 'contact',
name: 'contact',
component: Contact
}
]
}]
对于默认语言环境 en
我不想设置这个前缀所以 params.lang
在这种情况下将是完整路径而不是语言环境代码,因此请求任何没有语言环境代码的路径都将呈现匹配的 Home
组件。
那我该怎么做呢?像 beforeEnter
这样的导航守卫在这种情况下有帮助吗?
最佳答案
实际上你可以在没有导航守卫的情况下做到这一点。这里的主要目标是让路由器了解你的 url 何时没有 :lang
参数。要区分语言前缀和实际路径,您可以对 :lang
参数使用正则表达式模式,例如:(de|fr|en|zu)
(任何列表代码适合你)。并使 :lang
成为可选的 ?
。
所以像这样的东西应该可以工作:path: '/:lang(de|fr|en|zu)?'
至少它对我有用:) ...
所以现在如果你请求 /about
或 /de/about
两者都会匹配 About
.. 但是第一个将有 params.lang
=== 未定义。所以我想无论何时设置语言环境,您都可以: const locale = this.$route.params.lang || 'zh'
这是 Advanced Matching Patterns 的文档
routes: [{
path: '/:lang(de|fr|en|zu)?',
component: {
template: '<router-view />'
},
children: [
{
path: '',
name: 'home',
component: Home
},
{
path: 'about',
name: 'about',
component: About
},
{
path: 'contact',
name: 'contact',
component: Contact
}
]
}]
关于javascript - 如何在 Vue 路由器中为除默认语言环境之外的所有语言环境添加 i18n 语言环境前缀?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58240149/