更改直接 url 输入的语言 (VueJs)答案

【问题标题】：Change language on direct url input (VueJs)更改直接 url 输入的语言 (VueJs)
【发布时间】：2018-12-29 07:47:25
【问题描述】：

我已经用 vue-i18n 实现了本地化。

我的 main.js

import Vue from 'vue'
import { i18n } from './plugins/i18n'
import Cookie from "vue-cookie";

if (!Cookie.get('locale')) {
    Cookie.set('locale', 'en', 1)
}

new Vue({
    el: '#app',
    router,
    i18n,
    template: '<App/>',
    components: {App},
    render: h => h(App),
    mounted() {},
    data: {
        event: false
    }
}).$mount();

我的 i18n.js 插件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enTranslations from '../../lang/en'
import slTranslations from '../../lang/sl'
import Cookie from 'vue-cookie'

Vue.use(VueI18n);

export const i18n = new VueI18n({
    locale: Cookie.get('locale'),
    fallbackLocale: 'en', // fallback option
    messages: { en: enTranslations, sl: slTranslations}
});

我的路线

{
    path: '/:lang',
    component: {
        template: '<router-view></router-view>'
    },
    children: [
        {
            path: '',
            name: 'Home',
            component: Home
        },
        {
            path: 'contact',
            name: 'Contact',
            component: Contact
        }
    ]
}

还有我的导航组件中的切换语言功能

setLocale(locale) {
    let selectedLang = locale.toLowerCase();
    Cookie.set('locale', selectedLang, 1);
    this.$router.push({name: this.$route.name, params: {lang: selectedLang}});
    location.reload();
},

到目前为止，当我通过上层函数 setLocale() 切换语言时，一切正常且工作正常。当用户直接输入url时出现问题例如：

我目前选择了英文，然后用户直接通过 url 访问页面，比如说：localhost:8080/sl/contact

如果我正确理解文档，我应该使用 beforeEnter 函数在路由中配置它。所以我目前的实现是这样的。

beforeEnter: (to, from, next) => {
    let selectedLang = to.params.lang.toLowerCase();
    Cookie.set('locale', selectedLang, 1);
    next();
},

但这并不能解决问题，因为它只在第二次重新加载时起作用。因此，cooke 语言环境设置为正确的语言，但看起来它们的组件代码发生在之前，所以 UI 仍然是旧语言。当我再次刷新时，页面内容的语言正确。我该如何克服这个问题？

如果您需要任何其他信息，请告诉我，我会提供。谢谢！

【问题讨论】：

我的建议是使用vuex 来存储像这样的所有变量，使用vuex-persist 将Vuex 状态存储在LocalStorage 中，并使用一个名为setLanguage 的Vuex 动作来触发语言变化。我更好的建议是过渡到 Nuxt.js 和 nuxt-i18n，因为它更容易实现功能和更强大。

标签： javascript vue.js vuejs2

【解决方案1】：

当您从 localhost:8080/sl/contact 导航到 localhost:8080/en/contact 时，相同的 **'Contact'**vue 组件实例将被重复使用。由于两条路由都渲染同一个组件，

请参考文档：

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes.

要重新渲染联系人组件，您可以观察 $route 对象 或使用组件内导航守卫 beforeRouteUpdate 对更改做出反应，然后重新加载您的组件或您希望执行的任何应用程序逻辑。

要进一步了解组件内导航守卫，请参阅此链接https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

请试试这个，

选项 1：

watch:{
   $route(to, from){
      let selectedLang = to.params.lang.toLowerCase();
      Cookie.set('locale', selectedLang, 1);
      //reload your component
 }

选项 2：

beforeRouteUpdate: (to, from, next) => {
  let selectedLang = to.params.lang.toLowerCase();
  Cookie.set('locale', selectedLang, 1);
  next();
},

【讨论】：