javascript - 如何在 Vue 路由器中为除默认语言环境之外的所有语言环境添加 i18n 语言环境前缀？

Question

我正在尝试创建一个路由来为所有路由添加语言环境前缀，我使用以下代码让它工作:

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 这样的导航守卫在这种情况下有帮助吗？

Answer 1

实际上你可以在没有导航守卫的情况下做到这一点。这里的主要目标是让路由器了解你的 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
    }
  ]
}]