Vue, как я могу использовать Vue I18n в routre?

Question

[Константин]

Добрый день.
Я в файле router.js хочу использовать title: Vue.i18n.t('about') для заголовка,
но он его не видит.
Подскажите как это можно подключить?

{
    path: '/about',
    component: About,
    meta: { title: Vue.i18n.t('about') }     <--- Не работает
}
с этим подключением в консоле выдает ошибку

Comments

[Nikita Dergachov]

Можно ошибку еще показать?

[Константин]

Вот эта ошибка
В компонентах работает, а в js не хочет

[Алексей Шашенков]

Константин, Сделайте фабрику которая будет экспортировать это свойство.
Скорее всего на классе в роутере нет этих свойств. Надо смотреть на последовательность вызовов

[Константин]

Алексей Шашенков, а можно по подробней что за фабрику?

[alex]

Константин, кидайте main.js или где вы там все инициализируете. возможно порядок подключения не правиьлный

[Константин]

Alex,
Вот мой main.js

import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
import router from './router'
import axios from 'axios'
import VueI18n from 'vue-i18n'
import store from './store';
import english from '@/lang/english.js'
import russian from '@/lang/russian.js'

Vue.use(VueI18n)

let messages = {
    en : english,
    ru : russian,
}

const i18n = new VueI18n({
    //locale: 'ru',
    locale: window.localStorage.Language || 'ru',

    fallbackLocale: 'ru',
    messages
})
Vue.config.productionTip = false

Vue.use(Vuetify)

Vue.axios = Vue.prototype.$http = axios.create({
    baseURL: 'http://localhost:5000/api'
})


/* eslint-disable no-new */
new Vue({
    el: '#app',
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>',
    created() {
      this.$vuetify.theme.primary = '#01579B'
    }
})

[Алексей Ярков]

Константин, Ну конечно не будет работать ))
У вас сначала импортируется роутер
import router from './router'
потом инициализируется VueI18n

Vue.use(VueI18n)

let messages = {
    en : english,
    ru : russian,
}

const i18n = new VueI18n({
    //locale: 'ru',
    locale: window.localStorage.Language || 'ru',

    fallbackLocale: 'ru',
    messages
})

[Константин]

Алексей Ярков,
поменял я местами тоже самое (

[Алексей Ярков]

Константин, вы не понимаете )) Не импорты местами надо менять, а инициализацию i18n и роутера.

Answer 1

[alex]

у вас порядок инициализации неправильный. разбейте лучше все по файлам

// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import english from '@/lang/english.js'
import russian from '@/lang/russian.js'

Vue.use(VueI18n)

let messages = {
    en : english,
    ru : russian,
}

export default new VueI18n({
    //locale: 'ru',
    locale: window.localStorage.Language || 'ru',

    fallbackLocale: 'ru',
    messages
})

// router.js
...
import i18n from '@/path/to/i18n.js'
...
{
    path: '/about',
    component: About,
    meta: { title: i18n.t('about') }
}

// main.js
import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'
import router from './router'
import axios from 'axios'
import store from './store';
import i18n from '@/path/to/i18n.js'

Vue.config.productionTip = false

Vue.use(Vuetify)

Vue.axios = Vue.prototype.$http = axios.create({
    baseURL: 'http://localhost:5000/api'
})


/* eslint-disable no-new */
new Vue({
    el: '#app',
    i18n,
    router,
    store,
    components: { App },
    template: '<App/>',
    created() {
      this.$vuetify.theme.primary = '#01579B'
    }
})

Comments

[Константин]

Спасибо, все заработало ).

Еще если не сложно подскажите.
Все переключается на другой язык, кроме Title страницы
у меня такой код или как-то по другому нужно?

watch: {
        $route(to, from) {
            document.title = to.meta.title || '';
        },
    },

Нужно F5 нажимать, после этого срабатывает

[alex]

Константин, вот так попробуйте

{
    path: '/about',
    component: About,
    meta: { title: () => i18n.t('about') }
}

watch: {
        $route(to, from) {
            document.title = to.meta.title ? to.meta.title() || '' : '';
        },
    },

[Константин]

Alex,
попробовал, не меняется, Заголовок страницы

после F5, только

[alex]

Константин, все меняется, что-то вы не то значит делаете. где watch прописан? с какого на какой урл происходит смена? сам вотчер тригерится?

[Константин]

Alex,
watch() прописан в главном компоненте navbar, где генерируется меню,
смена происходит при клике на язык (Английский, Русский )

[alex]

Константин, watch должен быть выше router view. так трудно сказать не видя кода

[Константин]

Alex,
navbar.vue самый высокий.

[Константин]

До дома доберусь постараюсь скинуть как у меня сделано

[Константин]

Alex,

Переключение языков

<v-btn class="font-weight-regular ml-3" style="background: #1F6BA7" fab flat small @click="switchLocale()">
            {{ displayLocale.toLocaleUpperCase() }}
        </v-btn>

Сама функция переключения

computed: {
        displayLocale() {
            return this.$i18n.locale === 'ru' ? 'en' : 'ru'
        }
}

Чуть ниже watch()

watch: {
        $route(to, from) {
            //document.title = to.meta.title || '';
            document.title = to.meta.title ? to.meta.title() || '' : '';
        },
    },

При клике на пункты меню соответственно меняется и заголовок страницы,
а при переключении английский язык, заголовок страницы остается на русском,
только при нажатии на F5 заголовок становится на английском.
Это работало с этим вариантом document.title = to.meta.title || '';
Ваш вариант вообще никак не работает. (

Это все в одном файле

[alex]

Константин, switchLocale() покажите

[alex]

Константин,

Сама функция переключения

в компьютед-свойстах делать сайд-эффекты - плохая практика

[Константин]

switchLocale() {
            if (this.$i18n.locale === 'ru') {
                this.$i18n.locale = 'en'
            } else {
                this.$i18n.locale = 'ru'
            }
            window.localStorage.setItem('Language', this.$i18n.locale)
        }

[Константин]

Alex,

Сама функция переключения
в компьютед-свойстах делать сайд-эффекты - плохая практика

Почему, а как тогда правильно сделать?
Что такое сайд-эффекты?

[alex]

Константин,

в компьютед-свойстах делать сайд-эффекты - плохая практика

пардон, у вас там не присваивание =, а сравнение ===. мне сначала почему-то обратное показалось, в этом случае все норм, не берите в голову

[Константин]

watch: {
'$i18n.locale'() {
document.title = this.i18n.t(this.$route.meta.title)
}
},

Не работает этот вариант, на английский язык также заголовок не переводит и
к тому же при клике на пункты меню теперь перестал меняться заголовок страницы

[alex]

Константин, вот так попробуйте

watch: {
        '$i18n.locale'() {
            document.title = this.$i18n.t(this.$route.meta.title)
        },
        '$route': {
            handler(to) {
               document.title = this.$i18n.t(to.meta.title)
            },
            immediate: true
        }
    },

а этот код верните к изначальному варианту который у вас был и уберите вызов i18n

{
    path: '/about',
    component: About,
    meta: { title: 'about' }
}

[Константин]

Спасибо, все заработало.

watch: {
        '$i18n.locale'() {
            document.title = this.$i18n.t(this.$route.meta.title)
        },
        '$route': {
            handler(to) {
               document.title = this.$i18n.t(to.meta.title)
            },
            immediate: true
        }
    },

а зачем эта строчка immediate: true

[alex]

Константин, триггер хэндлера при инициализации

[Константин]

Понятно, но без него тоже работает

[alex]

Константин, ок. для спасибо есть кнопочка ;)

[Константин]

Подскажите что за кнопочка и где она, найти не могу

[Константин]

Alex, покажите кнопочку найти не могу

[alex]

Константин, уже нажали, «отметить решением»

[Константин]

Понял )