History Mode for vue-router in Laravel Environment

#discuss #vue #laravel

I've been trying to implement history mode for vue-router in my project which is built on Laravel 5.8. Any advice on how to go about doing this?

Top comments (7)

Prashanth Krishnamurthy • Sep 18 '19 • Edited

Are you looking for anything in particular? Off the top of my head, I don't remember anything special there except for the normal router practices :)

Enable history for Vue router if not done - mode: 'history' in your src/router.js file

Make everything dynamic. Do not import any components using import. For e.g.

{
   path: "/login",
   name: "login",
   component: () => import("./views/Login.vue")
 }

In your App.vue, use <router-view :key="$route.fullPath"></router-view> to repaint your components if you use the same view in multiple routes
Not directly related - but use Vuex instead of passing props all over the place
Create a default route at the very end to show a 404 page or redirect to home after displaying an error message. This is handy since we configure NGINX to redirect everything to your Vue app (to handle URLs like myapp.com/accounts - they can be directly entered in browser or you can hit a refresh when you in Account view.). See self plug: more details

Farsheed Bahmanian • Mar 31 '20

Thanks man, you saved my time.

Raghunathan Srinivasan • Sep 19 '19

I've done 1 and 3. Can you explain point number 2?

4 is okay.

Prashanth Krishnamurthy • Sep 19 '19

Sure. If you have to import a view in router - you normally do a static import the view at the beginning of the code and use the view name in the router.

The above code is a simple dynamic import. The view is loaded dynamically when it is needed. This can tree-shake a bit and make your initial download faster.

See vuejs.org/v2/guide/components-dyna...

I have updated one more point about using a default route.