我正在使用带有 Vue JS 和 TypeScript 的脚手架 Asp Net Core 2.1 网站。
我正在尝试整合kazupon i18n http://kazupon.github.io/带有路由器视图的插件。如果没有 URL 集成,它就可以正常工作。
我无法像这样获得正确的重定向http://localhost/en/product
and 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
但它只是破坏了功能:
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-demo https://github.com/ashour/vuejs-i18n-demo and vue-i18n-sap-多语言-最佳实践 https://stackoverflow.com/questions/41953836/vue-i18n-sap-multilingual-best-practice,但似乎在 i18n 迁移期间,某些示例可能已过时或丢失,并且这些用例不再起作用。