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?
For further actions, you may consider blocking this person and/or reporting abuse
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?
For further actions, you may consider blocking this person and/or reporting abuse
Saddam Hossain -
Scofield Idehen -
Dhimas Kirana -
Judy -
Top comments (7)
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 :)
mode: 'history'
in yoursrc/router.js
fileMake everything dynamic. Do not import any components using import. For e.g.
In your
App.vue
, use<router-view :key="$route.fullPath"></router-view>
to repaint your components if you use the same view in multiple routesNot 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
Thanks man, you saved my time.
I've done 1 and 3. Can you explain point number 2?
4 is okay.
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.
I've done everthing you said. I am still not able to get rid of the hash.
Normally, without using Laravel, history mode does work. In a Laravel based environment, it doesn't
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.