Vue i18n - adding locale to the URL using routerview - vue.js

Question

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.
I am not able to get the proper redirects working like http://localhost/en/product and http://localhost/fr/product
This is the initial boot.ts, that uses 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'))
});
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') },
]
}];
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();
});
This does not function either.
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.

Answer 1

what you primarily needed is to specify the base option in the vue-router constructor.
But first, you need to extract the locale from the url:
let locale = window.location.pathname.replace(/^\/([^\/]+).*/i,'$1');
and then specify the base in your VueRouter constructor:
const router = new VueRouter({
...
base: (locale.trim().length && locale != "/") ? '/' + locale : undefined
...
});
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
})
See the updated example:
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'))
});

Answer 2

Thank you very much #Julian Paolo Dayag, there were three problems with the approach in my question:
it requires a redirect to "/" + defaultLocale + to.path
the children routes shouldn't start with /, they should be product instead of /product
The router.beforeEach... is no longer needed
I ended up with this code:
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;
}
}
];