Laravel + Vue JS Routing shows page not found

Question

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!

It is not laravel error. Looks like you made syntax mistake on your Vue code. Let me see your full code. — Ts8060
– Ts8060, Commented Aug 2, 2018 at 3:28
@Ts8060 Which section would you like to take a look? I will add on above. I changed my route to Route::get('/admin/companies', 'Api\V1\CompaniesController@index'); and it works. Not sure why the above using VueRouter not working. — Sylph
– Sylph, Commented Aug 2, 2018 at 3:46

santanu bera · Accepted Answer · 2018-08-02 06:09:11Z

1

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'

edited Aug 2, 2018 at 6:09

answered Aug 2, 2018 at 5:54

santanu bera

1,31110 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sylph Over a year ago

Thank you ! Managed to solve this but you gave the solution I needed.

Talha Fayyaz · Accepted Answer · 2021-12-28 06:36:43Z

0

In Vue js <router-link use to navigate the page from vue side.

In route, file route define here.

const router = new VueRouter({

  routes: [
    { path: '/admin/companies', redirect: { name: 'CompaniesController' } },
  ],
})


<router-link to="/about">Go</router-link>

Then call localhost/admin/companies then the page will load.

answered Dec 28, 2021 at 6:36

Talha Fayyaz

3122 silver badges2 bronze badges

Collectives™ on Stack Overflow

Laravel + Vue JS Routing shows page not found

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related