Vue i18n-使用routerview将语言环境添加到URL

问题描述

我正在使用TypeScript将一个脚手架的AspNetCore 2.1站点与VueJS一起使用.我正在尝试将 kazupon i18n 插件与路由器视图集成.没有URL集成，它就可以正常工作.

I am using a scafolded AspNetCore 2.1 site with VueJS using TypeScript.I'm trying to integrate the kazupon i18n plugin with the router-view. Without the URL integration, it works just fine.

我无法像http://localhost/en/product和http://localhost/fr/product

这是最初的boot.ts，它使用VueI18n

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n'

Vue.use(VueRouter);
Vue.use(VueI18n);

import { messages, defaultLocale } from './lang/i18n';

const i18n = new VueI18n({
    locale: defaultLocale,
    fallbackLocale: 'en',
    messages
})

const routes = [
        { path: '/', component: require('./components/home/home.vue.html') },
        { path: '/product', component: require('./components/product/product.vue.html') },
];

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

new Vue({
    el: '#app-root',
    router: router,
    i18n: i18n,
    render: h => h(require('./components/app/app.vue.html'))
});

到目前为止，我已经尝试为routes加上前缀，但这只是破坏了功能:

So far I have tried prefixing routes but it just breaks the functionality:

const routes = [{
    path: '/',
    redirect: `/${defaultLocale}`,
},
{
    path: '/:locale',
    children: [
        { path: '/', component: require('./components/home/home.vue.html') },
        { path: '/counter', component: require('./components/product/product.vue.html') },
    ]
}];

我也尝试过依赖router.beforeEach来设置语言环境.

I've also tried relying on router.beforeEach to set the locale.

router.beforeEach((to, from, next) => {
    let language = to.params.locale;
    if (!language) {
        language = 'en';
    }

    i18n.locale = language;
    next();
});

这也不起作用.

我从 github.com/ashour/vuejs-i18n-demo和 vue-i18n-sap-multilingual-best-practice ，但是似乎在i18n迁移期间，某些示例可能已过时或丢失，并且这些用例不再起作用.

I've drawn inspiration from github.com/ashour/vuejs-i18n-demo and vue-i18n-sap-multilingual-best-practice, but it seems that during the i18n migration, some samples may have been obsolete or lost and those use-cases no longer function.

推荐答案

您主要需要指定 base 选项.

what you primarily needed is to specify the base option in the vue-router constructor.

但是首先，您需要从url中提取语言环境:

But first, you need to extract the locale from the url:

let locale = window.location.pathname.replace(/^\/([^\/]+).*/i,'$1');

，然后在VueRouter构造函数中指定base:

and then specify the base in your VueRouter constructor:

const router = new VueRouter({
    ...
    base: (locale.trim().length && locale != "/") ? '/' + locale : undefined
    ...
});

最后但并非最不重要的一点是，将语言环境传递到您的VueI18n构造函数中:

and last but not the least, pass the locale into your VueI18n constructor:

const i18n = new VueI18n({
    locale: (locale.trim().length && locale != "/") ? locale : defaultLocale,
    fallbackLocale: 'en',
    messages
})

查看更新后的示例:

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueI18n from 'vue-i18n'

Vue.use(VueRouter);
Vue.use(VueI18n);

import { messages, defaultLocale } from './lang/i18n';

var locale = window.location.pathname.replace(/^\/([^\/]+).*/i,'$1');


const i18n = new VueI18n({
    locale: (locale.trim().length && locale != "/") ? locale : defaultLocale ,
    fallbackLocale: 'en',
    messages
})

const routes = [
        { path: '/', component: require('./components/home/home.vue.html') },
        { path: '/product', component: require('./components/product/product.vue.html') },
];

const router = new VueRouter({
    base: (locale.trim().length && locale != "/") ? '/' + locale : undefined,
    mode: 'history',
    routes: routes
});

new Vue({
    el: '#app-root',
    router: router,
    i18n: i18n,
    render: h => h(require('./components/app/app.vue.html'))
});

这篇关于Vue i18n-使用routerview将语言环境添加到URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！