DEV Community

Raghunathan Srinivasan
Raghunathan Srinivasan

Posted on

History Mode for vue-router in Laravel Environment

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)

Collapse
 
prashanth1k profile image
Prashanth Krishnamurthy • 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 :)

  1. Enable history for Vue router if not done - mode: 'history' in your src/router.js file
  2. Make everything dynamic. Do not import any components using import. For e.g.

    {
       path: "/login",
       name: "login",
       component: () => import("./views/Login.vue")
     }
    
  3. 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

  4. Not directly related - but use Vuex instead of passing props all over the place

  5. 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

Collapse
 
bahmanian profile image
Farsheed Bahmanian

Thanks man, you saved my time.

Collapse
 
raghunathan profile image
Raghunathan Srinivasan

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

4 is okay.

Collapse
 
prashanth1k profile image
Prashanth Krishnamurthy

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.

Thread Thread
 
raghunathan profile image
Raghunathan Srinivasan

I've done everthing you said. I am still not able to get rid of the hash.

Thread Thread
 
raghunathan profile image
Raghunathan Srinivasan

Normally, without using Laravel, history mode does work. In a Laravel based environment, it doesn't

Thread Thread
 
prashanth1k profile image
Prashanth Krishnamurthy

Ah.. ok.
I follow a client/server-api pattern and probably gave that problem a miss. See if dev.to/mozartted/bullet-proofed-ro... helps.