我有一个 locale.js
文件,它负责定义用户区域设置。在这里:
import store from '@/vuex/index'
let locale
const defaultLocale = 'en_US'
if (store.getters['auth/authenticated']) {
locale = store.getters['auth/currentUser'].locale || defaultLocale
} else {
if (localStorage.getItem('locale')) {
locale = localStorage.getItem('locale')
} else {
locale = defaultLocale
}
}
export default locale
我还有一个 i18n.js
文件,它负责生成我在初始化我的应用程序时使用的 i18n
实例。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from '@/services/locale'
Vue.use(VueI18n)
const fallbackLocale = 'en_US'
let i18n = new VueI18n({
locale,
fallbackLocale,
})
i18n.setLocaleMessage('ru_RU', require('@/lang/ru_RU.json'))
i18n.setLocaleMessage('en_US', require('@/lang/en_US.json'))
export { i18n }
现在我认为让 URL 以区域设置为前缀会更方便,例如 /en/profile
或 /ru/profile
。这样我就可以与已经设置好的语言环境共享链接。
但不确定该怎么做。使所有路由成为子路由并放置 /:locale?
并不方便,因为路由器尚未初始化(我同时传递了 i18n
和 router
实例启动根应用程序实例)。
我怎样才能做到这一点,最好的方法是什么?
最佳答案
你可以实现路由器
routes: [{
path: '/:lang',
children: [
{
path: 'home'
component: Home
},
{
path: 'about',
component: About
},
{
path: 'contactus',
component: ContactUs
}
]
}]
并在beforeEach
钩子(Hook)中设置locale
// use beforeEach route guard to set the language
router.beforeEach((to, from, next) => {
// use the language from the routing param or default language
let language = to.params.lang;
if (!language) {
language = 'en';
}
// set the current language for vuex-i18n. note that translation data
// for the language might need to be loaded first
Vue.i18n.set(language);
next();
});
关于javascript - 在 vue.js 中使用语言环境前缀路由(使用 vue-i18n),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50321530/