[FIXED] Laravel + Vue JS Routing shows page not found

Issue

I followed this tutorial https://laraveldaily.com/quick-start-laravel-5-5-vue-js-simple-crud-project/

However when I load : localhost/admin/companies , I get page not found .

I tried to change to this too

const router = new VueRouter({
 routes: [
   { path: '/admin/companies', component: CompaniesController }
 ]
})

But I get "Syntax error { " on the part VueRouter({ which I don't understand why. Can anyone help?

Thanks!

Solution

Vue Router doesn't reload the page. Vue Router doesn't work like the Laravel Router. All it does whenever a Vue route changes, it mounts different component to a specific area. This area is defined by predefined router-view element. It mounts the component according to the Vue route changes.

Blade

<div class='box'>
    <router-view name="content-viewport"></router-view>
</div>

Vue

const router = new VueRouter({
  routes: [
    { path: '/admin/companies', components: {"content-viewport" : CompaniesController} }
  ]
});

Now when you go to domain#/admin/companies Vue will mount the component CompaniesController in 'content-viewport'

Answered By - santanu bera