Translate vuejs route paths
I got this fine idea about translating routes paths, which doesn't sound so clever any more :), once I have encountered a problem. I hope you guys will see/find a solution.
This is my routes.js file, where routes are defined
export default [
{
path: '/:lang',
component: {
template: '<router-view></router-view>'
},
children: [
{
path: '',
name: 'Home',
component: load('Home')
},
{
path: translatePath('contact'),
name: 'Contact',
component: load('Contact')
},
{
path: translatePath('cookiePolicy'),
name: 'CookiePolicy',
component: load('CookiePolicy')
},
]
},
]
// and my simple function for translating paths
function translatePath(path) {
let lang = Cookie.get('locale');
let pathTranslations = {
en: {
contact: 'contact',
cookiePolicy: 'cookie-policy',
},
sl: {
contact: 'kontakt',
cookiePolicy: 'piskotki',
}
};
return pathTranslations[lang][path];
}
And this is my change language functionality in my component
setLocale(locale) {
let selectedLanguage = locale.toLowerCase();
this.$my.locale.setLocale(selectedLanguage); // update cookie locale
console.log(this.$route.name);
this.$router.replace({ name: this.$route.name, params: { lang: selectedLanguage } });
location.reload();
},
The problem is following. When user executes the change language functionality I successfully change lang param, but the this.$route.name
keeps the same in old language. Is there a way to "reload" routes, so there will be new routes paths, which will include proper language?
If you need any additional informations, please let me know and I will provide. Thank you!
javascript vue.js vuejs2
|
show 1 more comment
I got this fine idea about translating routes paths, which doesn't sound so clever any more :), once I have encountered a problem. I hope you guys will see/find a solution.
This is my routes.js file, where routes are defined
export default [
{
path: '/:lang',
component: {
template: '<router-view></router-view>'
},
children: [
{
path: '',
name: 'Home',
component: load('Home')
},
{
path: translatePath('contact'),
name: 'Contact',
component: load('Contact')
},
{
path: translatePath('cookiePolicy'),
name: 'CookiePolicy',
component: load('CookiePolicy')
},
]
},
]
// and my simple function for translating paths
function translatePath(path) {
let lang = Cookie.get('locale');
let pathTranslations = {
en: {
contact: 'contact',
cookiePolicy: 'cookie-policy',
},
sl: {
contact: 'kontakt',
cookiePolicy: 'piskotki',
}
};
return pathTranslations[lang][path];
}
And this is my change language functionality in my component
setLocale(locale) {
let selectedLanguage = locale.toLowerCase();
this.$my.locale.setLocale(selectedLanguage); // update cookie locale
console.log(this.$route.name);
this.$router.replace({ name: this.$route.name, params: { lang: selectedLanguage } });
location.reload();
},
The problem is following. When user executes the change language functionality I successfully change lang param, but the this.$route.name
keeps the same in old language. Is there a way to "reload" routes, so there will be new routes paths, which will include proper language?
If you need any additional informations, please let me know and I will provide. Thank you!
javascript vue.js vuejs2
Take a look at kazupon.github.io/vue-i18n Might help point you in the right direction....
– Alex Mulchinock
Dec 28 '18 at 17:57
1
does the path inchildren
need to include the parent's path:/:lang/
??
– Tang Yun
Dec 28 '18 at 18:00
@TangYun Currently yes, otherwise it's not working. But I assume, that this is my problem! Didn't find any docs regarding this yet
– Valor_
Dec 28 '18 at 18:04
@AlexMulchinock I have already played with vue-i18n, but I didn't found a solution how to translate route paths. Thx for suggestion any way!
– Valor_
Dec 28 '18 at 18:05
@Valor_, checkout router.vuejs.org/guide/essentials/nested-routes.html
– Tang Yun
Dec 28 '18 at 18:13
|
show 1 more comment
I got this fine idea about translating routes paths, which doesn't sound so clever any more :), once I have encountered a problem. I hope you guys will see/find a solution.
This is my routes.js file, where routes are defined
export default [
{
path: '/:lang',
component: {
template: '<router-view></router-view>'
},
children: [
{
path: '',
name: 'Home',
component: load('Home')
},
{
path: translatePath('contact'),
name: 'Contact',
component: load('Contact')
},
{
path: translatePath('cookiePolicy'),
name: 'CookiePolicy',
component: load('CookiePolicy')
},
]
},
]
// and my simple function for translating paths
function translatePath(path) {
let lang = Cookie.get('locale');
let pathTranslations = {
en: {
contact: 'contact',
cookiePolicy: 'cookie-policy',
},
sl: {
contact: 'kontakt',
cookiePolicy: 'piskotki',
}
};
return pathTranslations[lang][path];
}
And this is my change language functionality in my component
setLocale(locale) {
let selectedLanguage = locale.toLowerCase();
this.$my.locale.setLocale(selectedLanguage); // update cookie locale
console.log(this.$route.name);
this.$router.replace({ name: this.$route.name, params: { lang: selectedLanguage } });
location.reload();
},
The problem is following. When user executes the change language functionality I successfully change lang param, but the this.$route.name
keeps the same in old language. Is there a way to "reload" routes, so there will be new routes paths, which will include proper language?
If you need any additional informations, please let me know and I will provide. Thank you!
javascript vue.js vuejs2
I got this fine idea about translating routes paths, which doesn't sound so clever any more :), once I have encountered a problem. I hope you guys will see/find a solution.
This is my routes.js file, where routes are defined
export default [
{
path: '/:lang',
component: {
template: '<router-view></router-view>'
},
children: [
{
path: '',
name: 'Home',
component: load('Home')
},
{
path: translatePath('contact'),
name: 'Contact',
component: load('Contact')
},
{
path: translatePath('cookiePolicy'),
name: 'CookiePolicy',
component: load('CookiePolicy')
},
]
},
]
// and my simple function for translating paths
function translatePath(path) {
let lang = Cookie.get('locale');
let pathTranslations = {
en: {
contact: 'contact',
cookiePolicy: 'cookie-policy',
},
sl: {
contact: 'kontakt',
cookiePolicy: 'piskotki',
}
};
return pathTranslations[lang][path];
}
And this is my change language functionality in my component
setLocale(locale) {
let selectedLanguage = locale.toLowerCase();
this.$my.locale.setLocale(selectedLanguage); // update cookie locale
console.log(this.$route.name);
this.$router.replace({ name: this.$route.name, params: { lang: selectedLanguage } });
location.reload();
},
The problem is following. When user executes the change language functionality I successfully change lang param, but the this.$route.name
keeps the same in old language. Is there a way to "reload" routes, so there will be new routes paths, which will include proper language?
If you need any additional informations, please let me know and I will provide. Thank you!
javascript vue.js vuejs2
javascript vue.js vuejs2
edited Dec 31 '18 at 11:22
Valor_
asked Dec 28 '18 at 17:50
Valor_Valor_
1,03932257
1,03932257
Take a look at kazupon.github.io/vue-i18n Might help point you in the right direction....
– Alex Mulchinock
Dec 28 '18 at 17:57
1
does the path inchildren
need to include the parent's path:/:lang/
??
– Tang Yun
Dec 28 '18 at 18:00
@TangYun Currently yes, otherwise it's not working. But I assume, that this is my problem! Didn't find any docs regarding this yet
– Valor_
Dec 28 '18 at 18:04
@AlexMulchinock I have already played with vue-i18n, but I didn't found a solution how to translate route paths. Thx for suggestion any way!
– Valor_
Dec 28 '18 at 18:05
@Valor_, checkout router.vuejs.org/guide/essentials/nested-routes.html
– Tang Yun
Dec 28 '18 at 18:13
|
show 1 more comment
Take a look at kazupon.github.io/vue-i18n Might help point you in the right direction....
– Alex Mulchinock
Dec 28 '18 at 17:57
1
does the path inchildren
need to include the parent's path:/:lang/
??
– Tang Yun
Dec 28 '18 at 18:00
@TangYun Currently yes, otherwise it's not working. But I assume, that this is my problem! Didn't find any docs regarding this yet
– Valor_
Dec 28 '18 at 18:04
@AlexMulchinock I have already played with vue-i18n, but I didn't found a solution how to translate route paths. Thx for suggestion any way!
– Valor_
Dec 28 '18 at 18:05
@Valor_, checkout router.vuejs.org/guide/essentials/nested-routes.html
– Tang Yun
Dec 28 '18 at 18:13
Take a look at kazupon.github.io/vue-i18n Might help point you in the right direction....
– Alex Mulchinock
Dec 28 '18 at 17:57
Take a look at kazupon.github.io/vue-i18n Might help point you in the right direction....
– Alex Mulchinock
Dec 28 '18 at 17:57
1
1
does the path in
children
need to include the parent's path: /:lang/
??– Tang Yun
Dec 28 '18 at 18:00
does the path in
children
need to include the parent's path: /:lang/
??– Tang Yun
Dec 28 '18 at 18:00
@TangYun Currently yes, otherwise it's not working. But I assume, that this is my problem! Didn't find any docs regarding this yet
– Valor_
Dec 28 '18 at 18:04
@TangYun Currently yes, otherwise it's not working. But I assume, that this is my problem! Didn't find any docs regarding this yet
– Valor_
Dec 28 '18 at 18:04
@AlexMulchinock I have already played with vue-i18n, but I didn't found a solution how to translate route paths. Thx for suggestion any way!
– Valor_
Dec 28 '18 at 18:05
@AlexMulchinock I have already played with vue-i18n, but I didn't found a solution how to translate route paths. Thx for suggestion any way!
– Valor_
Dec 28 '18 at 18:05
@Valor_, checkout router.vuejs.org/guide/essentials/nested-routes.html
– Tang Yun
Dec 28 '18 at 18:13
@Valor_, checkout router.vuejs.org/guide/essentials/nested-routes.html
– Tang Yun
Dec 28 '18 at 18:13
|
show 1 more comment
1 Answer
1
active
oldest
votes
Check this basic example, you can see the path that change according to the selected language.
This can be improved using some translation plugin like vue-i18n and can also be wrapped into a mixin for more reusability.
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962420%2ftranslate-vuejs-route-paths%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Check this basic example, you can see the path that change according to the selected language.
This can be improved using some translation plugin like vue-i18n and can also be wrapped into a mixin for more reusability.
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
add a comment |
Check this basic example, you can see the path that change according to the selected language.
This can be improved using some translation plugin like vue-i18n and can also be wrapped into a mixin for more reusability.
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
add a comment |
Check this basic example, you can see the path that change according to the selected language.
This can be improved using some translation plugin like vue-i18n and can also be wrapped into a mixin for more reusability.
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
Check this basic example, you can see the path that change according to the selected language.
This can be improved using some translation plugin like vue-i18n and can also be wrapped into a mixin for more reusability.
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
const Home = {
template: '<div>Home</div>'
}
const Contact = {
template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
template: '<div>COOKIE ==> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
name: 'home',
path: '/',
component: Home
},
{
name: 'contact',
path: '/:pathTranslation',
component: Contact
},
{
name: 'cookies',
path: '/:pathTranslation',
component: Cookie
}
]
})
new Vue({
router,
el: '#app',
data: {
lang: 'IT',
translations: {
IT: {
contact: 'Contatti',
cookies: 'Cookies IT',
},
EN: {
contact: 'Contacts',
cookies: 'Cookies EN',
}
}
},
watch: {
lang: function(newLang) {
this.goto(this.$route.name, newLang);
}
},
methods: {
goto(path, lang=null) {
this.$router.replace({
name: path,
params: {
pathTranslation: this.translations[lang || this.lang][path]
}
});
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<select v-model="lang">
<option value="IT">IT</option>
<option value="EN">EN</option>
</select>
<button @click="goto('contact')">To contact</button>
<button @click="goto('cookies')">To cookies</button>
<router-view></router-view>
</div>
answered Dec 31 '18 at 12:42
Vanojx1Vanojx1
4,26521025
4,26521025
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962420%2ftranslate-vuejs-route-paths%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Take a look at kazupon.github.io/vue-i18n Might help point you in the right direction....
– Alex Mulchinock
Dec 28 '18 at 17:57
1
does the path in
children
need to include the parent's path:/:lang/
??– Tang Yun
Dec 28 '18 at 18:00
@TangYun Currently yes, otherwise it's not working. But I assume, that this is my problem! Didn't find any docs regarding this yet
– Valor_
Dec 28 '18 at 18:04
@AlexMulchinock I have already played with vue-i18n, but I didn't found a solution how to translate route paths. Thx for suggestion any way!
– Valor_
Dec 28 '18 at 18:05
@Valor_, checkout router.vuejs.org/guide/essentials/nested-routes.html
– Tang Yun
Dec 28 '18 at 18:13