如何在 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

其实不用导航守卫也可以做到。这里的主要目标是让路由器理解你有一个没有 :lang 参数的 url 。要区分语言前缀和实际路径，您可以对 :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 语言环境前缀？

How to add an i18n locale prefix in Vue router for all the locales except for the default one?

javascript

vue.js

vue-router

vue-i18n