gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:33:19 35 4
gpt4 key购买 nike

我正在使用带有 VueJS 的脚手架 AspNetCore 2.1 站点,使用 TypeScript。我正在尝试整合 kazupon i18n带有路由器 View 的插件。没有 URL 集成,它工作得很好。

我无法获得像 http://localhost/en/producthttp://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 添加前缀,但它只是破坏了功能:

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 来设置语言环境。

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

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

这也不起作用。

我的灵感来自 github.com/ashour/vuejs-i18n-demovue-i18n-sap-multilingual-best-practice , 但似乎在 i18n 迁移期间,一些示例可能已经过时或丢失,并且这些用例不再起作用。

最佳答案

您主要需要的是指定 base vue-router 构造函数中的选项。

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

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

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

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

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

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.js - Vue i18n - 使用 routerview 将语言环境添加到 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51065687/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com