Многоязычные маршруты (префикс) с использованием laravel маршрутов + vuejs просмотров - PullRequest
Новая
       53

Многоязычные маршруты (префикс) с использованием laravel маршрутов + vuejs просмотров

0 голосов
/ 03 апреля 2020

Я разработал веб-сайт, используя laravel и VueJS. Возможно, этот выбор был не лучшим, но маршрутизация выполняется с помощью Laravel ..

Теперь я хотел бы добавить язык в URL для лучшей ссылки. Проблема в том, что мои маршруты в laravel (web. php), в то время как языки mgmt сделаны с vuejs.

Похоже, я могу добавить язык в маршруты, используя эту Route :: group (['prefix' => '{locale}'], function () {

Но тогда как я могу получить к нему доступ с помощью vuejs, не добавляя в каждый компонент реквизиты? Есть идеи?

Большое спасибо,

Вот как это работает:

web. php

Route::get('/test', function () { //how to add the language here?
    return view('test');
});

Приложение. js

import Vue from 'vue';
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated.js'; //here are all translations
Vue.use(VueInternationalization);
var test = Vue.component('test', require('./components/TestComponent.vue').default);
var Navbar = Vue.component('navbar', require('./components/common/NavbarComponent.vue').default); 

let i18n = new VueInternationalization({
        locale: lang,//  || 'en',
        // fallbackLocale: 'en',
        messages: Locale
    });

    const app = new Vue({
        el: '#app',
        store,
        i18n,
        components:{test, navbar}
    });

NavbarComponent. vue // здесь я устанавливаю язык 

<template>
    <select v-model="$i18n.locale" @change="langChanged($i18n.locale)">
        <option v-for="(lang, i) in langs" :value="lang">{{ lang.toUpperCase() }}</option>
    </select>
</template>
<script>
       import VueInternationalization from 'vue-i18n';
       Vue.use(VueInternationalization);
       const lang = document.documentElement.lang.substr(0, 2); 
       const i18n = new VueInternationalization({
            locale: lang
       });
       mounted(){
            this.$i18n.Locale = localStorage.Lang;
       }
       methods:{
            langChanged(lang){
                localStorage.Lang=lang;
                this.$i18n.locale=lang;
                axios.get('/setlang/'+lang).then(
                    response => {
                        //changing the language in cookie so that it 
                    }
                );
            },
     }
...