问题:如何在Vue路由器中为除默认语言之外的所有语言环境添加i18n语言环境前缀?

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

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这样的导航卫士有帮助吗?

解答

实际上你可以在没有导航守卫的情况下做到这一点。这里的主要目标是让路由器了解您何时有一个没有:lang参数的 url。要区分语言前缀和实际路径,您可以对:lang参数使用正则表达式模式,例如:(de|fr|en|zu)(任何适合您的代码列表)。并使:lang成为可选的?。

所以这样的事情应该可以工作:path: '/:lang(de|fr|en|zu)?'至少它对我有用:) ...

所以现在如果你请求/about或/de/about两者都将匹配About.. 但是第一个将有params.langu003du003du003d 未定义。所以我想每当你设置你的语言环境时,你都可以这样做:const locale = this.$route.params.lang || 'en'

这是高级匹配模式的文档

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