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

实际上，您可以在没有导航卫士的情况下进行操作。此处的主要目标是让路由器了解没有: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 || 'en'

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

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

1 个答案: