Vue Router + Laravel: Reloading a page without a 404 and passing in a route varable

Question

When reloading my single page application, I would like the url to load correctly instead of throwing a 404 error. Using Laravel 5.6, Vue.js 2.6, & MAMP.

I have tried the following code, however, I am loading different app.js files in the same welcome view based on what the URL is. Because of this structure,, this solution is not working:

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\.-]*');

I would like to have refresh work with my vue router. Any suggestions, either having to do with my routes/web.php file or .htaccess file is appreciated.

Note: This .htaccess file configuration was not working for me (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>

Generally, you are following a good path. May I see your Blade template? Do you have <router-view/> there? — Benjamin Beganović
@BenjaminBeganović I added the code you asked for to my question. — user7531085

Benjamin Beganović Benjamin Beganović · Accepted Answer · 2019-06-24T07:41:29

Well, as far I can see, your approach was good. You are capturing all GET requests, and passing them to your Blade view.

My suggestion:

Cleaner route: Route::get('/{any}', 'YourController@index')->where('any', '.*');

Your app.js (main JS file should look something like this):

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,
});

With all this configuration and your router-view, you should be fine.

Vue Router + Laravel: Reloading a page without a 404 and passing in a route varable

1 Answers