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

Question

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

我无法像 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，但它只是破坏了功能：

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 and vue-i18n-sap-multilingual-best-practice 中汲取了灵感，但似乎在 i18n 迁移过程中，一些示例可能已经过时或丢失，并且这些用例不再起作用。

Answer 1

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

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

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

然后在 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,'');


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'))
});

Answer 2

非常感谢@Julian Paolo Dayag，我的问题中的方法存在三个问题：

它需要重定向到 "/" + defaultLocale + to.path
子路由不应该以 / 开头，它们应该是 product 而不是 /product
不再需要router.beforeEach...

我得到了这段代码：

const routes = [
  {
    path: "/",
    redirect: `/${defaultLocale}`
  },
  {
    path: `/(fr|en)`,
    component: require("./components/app/routertemplate.vue.html"),
    children: [
      { path: "", component: require("./components/home/home.vue.html") },
      {
        path: "product",
        component: require("./components/product/product.vue.html")
      }
    ]
  },
  {
    path: "/(.*)",
    redirect: (to: any) => {
      return "/" + defaultLocale + to.path;
    }
  }
];

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

Vue i18n - adding locale to the URL using routerview

internationalization

vue.js

vue-router

vuejs2