Laravel Vue Режим истории VueRouter - PullRequest
Новая
       23

Laravel Vue Режим истории VueRouter

2 голосов
/ 14 марта 2020

Я создаю проект электронной коммерции с laravel, vue и vue router

Я хочу использовать vue router с режимом истории, но это вызывает у меня проблемы.

Вот мой код 

new Vue({
    el: '#app',
    router: new VueRouter({
        mode: 'history',
        routes
    })
});

Вот мой маршрут в сети. php с промежуточным программным обеспечением для локали 

Route::group(['prefix' => '{locale}', 'where' => ['locale' => '[a-zA-Z]{2}'], 'middleware' => 'setlocale'], function () {
    Route::view('/{path?}', ('layouts.app'))->where('path', '.*');
});

Вот мой маршрут с vue router 

export const routes = [
    {
        path: '/',
        component: require('./components/Page/HomePage').default,
    },
    {
        path: '/product',
        component: require('./components/Page/Product/ProductPage').default,
    },
];

Мне нужно, чтобы мой URL был 

http://localhost/en

вместо (с хэштегом) 

http://localhost/en#/

После использования режима истории я успешно удалил хэштег. Но, ссылка маршрутизатора другой удалит мою локаль в моем URL 

http://localhost/product

Я не знаю, что теперь делать с этим. Пожалуйста, помогите ~ Спасибо.

Обновление 19 марта 2020 enter image description here

Ответы [ 2 ]

5 голосов
/ 16 марта 2020

Вам необходимо установить значение base, чтобы указать Vue Маршрутизатор, каков базовый URL-адрес вашего приложения. В вашем случае вы можете установить его динамически, используя значение локали.

Например, в вашем шаблоне Blade может быть следующий скрипт для установки значения локали для объекта JavaScript window: 

<script>
    window._locale = "{{ app()->getLocale() }}";
</script>

И затем вы можете установить значение base для локали при создании маршрутизатора: 

router: new VueRouter({
  mode: 'history',
  base: `/${window._locale}/`,
  routes
})
2 голосов
/ 19 марта 2020

Очень простой способ. Примите и локаль в роутере Vue. Таким образом, ваш маршрут будет выглядеть следующим образом: 

export const routes = [
    {
        path: '/:locale',
        children: [
        {
            path: '',
            component: require('./components/Page/HomePage').default,
        },
        {
            path: 'product',
            component: require('./components/Page/Product/ProductPage').default,
        },
        ]
    }
];

просто убедитесь, что для маршрута детей не ставьте '/' в начале, потому что он удаляет локаль

...