0

I'm updating my laravel website to vue spa, I have just 2 routes in vue at the moment for test purpose.

When click of terms link from page, it works fine and render the component.

But as I refresh /terms page app throws the 404 error.

Any guess what is going on.

routes.js

  import Home from './components/Home.vue';
  import Terms from './components/Terms.vue';

  export const routes = [
      {
          path: '/',
          component: Home
      },
      {
          path: '/terms',
          component: Terms
      }
  ];

app.js

require('./bootstrap');

            import Vue from 'vue';
            import VueRouter from 'vue-router';
            import Vuex from 'vuex';

            import {routes} from './routes';
            import StoreDate from './store';
            import MainApp from './components/MailApp.vue';


            Vue.use(VueRouter);
            Vue.use(Vuex);

            const store = new Vuex.Store(StoreDate);

            const router = new VueRouter({
                routes,
                mode: 'history'
            });


            /**
             * Next, we will create a fresh Vue application instance and attach it to
             * the page. Then, you may begin adding components to this application
             * or customize the JavaScript scaffolding to fit your unique needs.
             */

            Vue.component('tasks', require('./components/Tasks.vue'));

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

Following this video guide https://www.youtube.com/watch?v=6FSa6XET8MY

danyal14
  • 367
  • 1
  • 4
  • 18
  • 1
    This is how the history mode behaves. It just changes the URL without requesting the content from the URL. On a reload it does exactly that and the page is not available. See here: https://stackoverflow.com/a/47617576/3233827 – ssc-hrep3 Oct 27 '18 at 09:53
  • but converting mode to hash did work, I will research the difference mode: history/hash – danyal14 Oct 27 '18 at 15:41

1 Answers1

0

You will need to add the terms route in Laravel too, or return your spa view on 404 in Laravel web routes

Maxim Vanhove
  • 11
  • 4
  • I dont think so that's correct, SPA routes must not depending on Laravel routes, as I understand. – danyal14 Oct 27 '18 at 15:40
  • True, I added the following to my app to get all routes not matching my laravel routes: `Route::get('{spa?}', function ($spa = null) { return view('app'); })->where('spa', '.*');` – Maxim Vanhove Oct 30 '18 at 10:23