javascript - Vue路由器翻译url
问题描述
我在我的 vue.js 项目中使用 vue-router,并且我还在使用 vue-i18n 进行 fr 和 en 的国际化。一切正常,但我需要翻译 URL,但我什么也没找到。有人已经做过这样的事情了吗?
示例:/en/home -> /fr/accueil /en/about -> /fr/a-propos
解决方案
这是一个例子
window._ = require('lodash');
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {}
})
import vuexI18n from 'vuex-i18n'
Vue.use(vuexI18n.plugin, store)
const i18n = Vue.i18n
import translationsEn from './locales/en.json'
import translationsHr from './locales/hr.json'
i18n.add('en', translationsEn)
i18n.add('hr', translationsHr)
i18n.set('en')
i18n.fallback('en')
// Core
import App from './components/App.vue'
import Navbar from './components/Navbar.vue'
import MainFooter from './components/Footer.vue'
// Pages
import Page from './components/views/Page.vue'
import HomePage from './components/views/Home.vue'
import AboutPage from './components/views/About.vue'
import ContactPage from './components/views/Contact.vue'
import NotFoundPage from './components/views/NotFound.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomePage,
alias: '/:locale'
},
/**
* UNTRANSLATED ROUTES
*
* This will always set route path according to default locale
* and it will be the same for every localized route.
*
* This is goto approach if you don't need translated route names
*
* Example: /en/about, /hr/about, /es/about, ...
*/
// {
// path: '/:locale/' + i18n.translate('routes.about'),
// name: 'about',
// component: AboutPage
// },
// {
// path: '/:locale/' + i18n.translate('routes.contact'),
// name: 'about',
// component: ContactPage
// },
/**
* TRANSLATED ROUTES
*
* This is little bit of an experimental hack solution,
* and it is simple for smaller amount of routes.
*
* Required to do:
* - set path for every language (en, hr)
* - create dummy component which will contain view-router element (Page.vue)
* - set children with translated path names
* - set name in format {locale.routeName}
*
* This can be done with the foreach loop to simplify the setup code
*
* Example: /en/about, /hr/o-nama, /es/acerca-de, ...
*/
{
path: '/en',
component: Page,
children: [
{
path: i18n.translateIn('en', 'routes.about'),
name: 'en.about',
component: AboutPage
},
{
path: i18n.translateIn('en', 'routes.contact'),
name: 'en.contact',
component: ContactPage
}
]
},
{
path: '/hr',
component: Page,
children: [
{
path: i18n.translateIn('hr', 'routes.about'),
name: 'hr.about',
component: AboutPage
},
{
path: i18n.translateIn('hr', 'routes.contact'),
name: 'hr.contact',
component: ContactPage
}
]
},
{
path: '/:locale/*',
name: 'not-found',
component: NotFoundPage
}
]
const router = new VueRouter({
routes,
scrollBehavior (to, from, savedPosition) {
//
},
mode: 'history'
})
window.router = router
/**
* Fetch correct route based on language and route name
*/
router.beforeEach((to, from, next) => {
let locale = '',
localeUrlSegment = to.path.split('/'),
currentLocale = i18n.locale()
// Get locale from path
localeUrlSegment.shift()
locale = localeUrlSegment[0]
// Locale fallback
if (locale === '') locale = currentLocale
// Set locale
i18n.set(locale)
to.params.locale = locale
// Move on the next hook (render component view)
next()
})
const app = new Vue({
el: '#app',
components: {
App,
Navbar,
MainFooter
},
data: {},
computed: {},
methods: {},
router
});
供参考,原文链接为https://github.com/kikky7/vue-localized-routes-example/blob/master/assets/js/app.js
推荐阅读
- r - 主题建模,文学。初学者
- c++ - 为什么链接到 Qt 5.9 的程序不能在 Qt 5.6 下运行?
- azure - Azure DevOps 步骤将 YAML 从 Azure 存储帐户复制到 DevOps 存储库
- javascript - 如何从 NGINX http 请求对象将带有 json 主体的子请求发布到另一台服务器
- java - 从Java中的匿名内部类调用外部同步方法
- c# - ImageButton 状态不会重置为正常
- python - 将 print("...") 添加到 "INSERT or IGNORE into" 到 sqlite3
- python - 如何使用 python 2.6.6 或 python 2.7.5 安装旧 PIP 版本?
- python - 如何从提交的日期时间查询小于当前日期时间
- npm - 使用 yarn 从 package.json 安装单一依赖项