Javascript 更改直接url输入（VueJs）上的语言

我已经用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();

我的路线

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

到目前为止，当我通过上面的函数

setLocale（）

切换语言时，一切都正常工作。当用户直接输入url时会出现问题，例如：

我目前选择了英语，然后用户直接通过url访问页面，比如：

localhost:8080/sl/contact

如果我正确理解了文档，我应该在routes中使用beforeEnter功能配置此功能。因此，我当前的实现如下所示

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

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

---

如果您需要任何其他信息，请让我知道，我会提供。谢谢大家!

当您从localhost:8080/sl/contact导航到localhost:8080/en/contact时，将重用相同的**'contact'**vue组件实例。由于两条管线呈现相同的组件

请参阅以下文档：

要重新呈现联系人组件，您可以查看$route对象，或者在routeUpdate之前在组件导航卫士中使用，以对更改做出反应，然后重新加载组件或您希望执行的任何应用程序逻辑

要进一步了解组件内导航卫士，请参阅此链接

请试试这个

选项1:

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

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

选项2:

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

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

---

我的建议是使用

vuex

来存储所有变量，使用

vuex persist

将vuex状态存储在LocalStorage中，并使用一个名为

setLanguage

的vuex操作来触发语言更改。我甚至更好的建议是过渡到Nuxt.js和Nuxt-i18n，因为它更容易实现功能，也更强大。