Vue Router + Laravel: перезагрузка страницы без 404 и прохождение по маршруту varable - PullRequest
Новая
       18

Vue Router + Laravel: перезагрузка страницы без 404 и прохождение по маршруту varable

0 голосов
/ 24 июня 2019

При перезагрузке моего одностраничного приложения я бы хотел, чтобы URL-адрес загружался правильно, а не выдавал ошибку 404.Используя Laravel 5.6, Vue.js 2.6 и & MAMP.

Я попробовал следующий код, однако я загружаю разные файлы app.js в одном и том же окне приветствия в зависимости от URL.Из-за этой структуры, это решение не работает: 

Route::get('/{vue_capture?}', function () {
    return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/web.php file based on the url']);
})->where('vue_capture', '[\/\w\.-]*');

Я бы хотел обновить работу с моим маршрутизатором vue.Будем благодарны за любые предложения, связанные либо с моим маршрутом / web.php файлом, либо с файлом .htaccess.

Примечание. Эта конфигурация файла .htaccess у меня не работала (apache): https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

//welcome blade
    <div id="app">
        <app></app>
    </div>
    <script src="{{ asset($app_path) }}"></script>

//app.vue
    <div class="container-fluid px-0">
        <router-view/>
    </div>

1 Ответ

0 голосов
/ 24 июня 2019

Ну, насколько я понимаю, ваш подход был хорош.Вы перехватываете все запросы GET и передаете их в представление Blade.

Мое предложение:

  • Более чистый маршрут: Route::get('/{any}', 'YourController@index')->where('any', '.*');

Ваше приложение.js (основной файл JS должен выглядеть примерно так): 

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import About from './views/About'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

Со всей этой конфигурацией и вашим router-view у вас все будет хорошо.

...