url 和嵌套路由中的 i18n 语言环境更改答案

【问题标题】：i18n locale change in url and nested routesurl 和嵌套路由中的 i18n 语言环境更改
【发布时间】：2020-10-19 22:20:47
【问题描述】：

从 Vue Router 炼狱深处来电求助！我现在已经花了几天时间结合多种资源，但在我的特定设置中未能成功使用 url 路由进行内部化。

要点如下：我有一个带有嵌套路由器视图的项目。结构是这样的：

.
├── /step
│   ├── /1 
│   ├── /2 
│   └── /3 
├── /join
└── /success

这是我到目前为止所做的：

当应用程序加载时，它应该在 url 中显示默认语言环境 --> www.app.com/de 并重定向到 /step。我在路由器 index.js 中完成了这个：

{
        path: '/',
        beforeEnter(to, from, next) {
          next(i18n.locale + '/step')
        }
      },

在 i18n.js 中：

//global variable to check language support
export const supportedLangs = ["de", "en"];

// check what url user has arrived at, retrieves "en", "de" etc
let langParam = window.location.pathname.slice(1,3)

export default new VueI18n({
  locale: supportedLangs.includes(langParam) ? langParam  : 'de',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
})

从 url 中提取语言参数（会有指向我的应用程序的链接，带有特定的 /de 或 /en 参数）。我已经在路由器 index.js 中完成了：

{
    path: '/:lang', 
    component: App,
    beforeEnter(to, from, next) {
      let lang = to.params.lang
      if ( supportedLangs.includes(lang) ) {
        if (i18n.locale !== lang) {
          i18n.locale = lang
        }
        return next()
      }
      return next(i18n.locale)
    }
}

我正面临 2 个可以使用帮助的问题。

问题 1： 未嵌套的路由不渲染（例如www.app.com/de/join）

问题 2： App.vue 外面的内容被渲染了两次，表明路由嵌套没有正确完成（我看到双应用栏）

我用代码做了一个简化的操场-> HERE

手指交叉的人也许可以指出我哪里出错了！

【问题讨论】：

标签： javascript vue.js vue-router vue-i18n

【解决方案1】：

好的，经过数小时的测试，我想我找到了一个结构正确的解决方案。我缺少的是一个用于我的动态语言路由的空组件。


const routes = [
  {
    path: "/",
    beforeEnter(to, from, next) {
      next(i18n.locale + "/step");
    },
    component: App
  },

  {
    path: "/:lang",
    component: { template: "<router-view />" },
    beforeEnter(to, from, next) {
      let lang = to.params.lang;
      if (supportedLangs.includes(lang)) {
        if (i18n.locale !== lang) {
          i18n.locale = lang;
        }
        return next();
      }
      return next(i18n.locale);
    },
    children: [
      {
        path: "step",
        redirect: "step/1",
        name: "Start",
        component: Steps,
        children: [
          {
            path: "1",
            name: "step1",
            component: Step1
          },
          {
            path: "2",
            name: "step2",
            component: Step2
          },
          {
            path: "3",
            name: "step3",
            component: Step3
          }
        ]
      },
      {
        path: "join",
        name: "join",
        component: Join
      },
      {
        path: "success",
        name: "success",
        component: Success
      }
    ]
  }
];

Here 是工作版本代码框。不知道为什么需要它，但它使我的项目按我需要的方式工作，所以我现在不会质疑宇宙：P

【讨论】：