Question

我已经使用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仍然是旧语言。当我再次刷新时，页面的内容将以正确的语言显示。我该如何克服这个问题？

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

Answer 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();
},

在直接网址输入（VueJs）上更改语言

1 个答案: