Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

VueRouter beforeRouteEnter hook data changes are not reloaded

See original GitHub issue

Hi,

thanks for your work on hot reload!

I’m using vue-hot-reload-api implicitly with webpack dev server and vue-loader. When introducing vue-router into the mix and declaring a beforeRequestEnter hook, hot reloading does not work.

Expected behaviour

Hot reloading should reload data set by vue-routers beforeRequestEnter hook as well.

Actual behaviour

The beforeRequestEnter hook is executed, but the data set on the instance is not reloaded.

Steps to reproduce

Clone https://github.com/stoically/vue-router-hot-reload-issue (based on vue init webpack-simple) npm install npm run dev Navigate to http://localhost:8080 You’ll see Message from VueRouter: beforeRouteEnter Now make a change in the src/Router.vue file Message changes to Message from VueRouter: data

Notes

I’m actually not sure if this is expected behaviour. But if it is I would appreciate any pointers on how to achieve hot reloading in this case manually.

Best regards

Issue Analytics

State:
Created 6 years ago
Reactions:26
Comments:7

Top GitHub Comments

10reactions

jorngeorgcommented, Oct 22, 2018

I’m also having this issue where all my routes fetch data in the beforeRouteEnter hook as prescribed in the router docs , however this hook is not fired by hot-reload and all data are removed from the component, forcing me to do a full manual reload of the page.

Will the router hooks be supported by hot-reload or are we left with cmd+r for the unforeseeable future?

2reactions

boyccecommented, Sep 30, 2019

Be cool to get attention on this issue. Guess i have to forgo HMR for now.

Top Results From Across the Web

Vue router beforeRouteEnter - after refreshing the page, the ...

There are no ways. After refreshing current page is the first navigated route. Just output "Back" in case there's no name. – Estus...

Data Fetching | Vue Router

We can perform the data fetching in the beforeRouteEnter guard in the incoming component, and only call next when the fetch is complete....

Even More Advanced Routing with Vue: Data Fetching

In this approach we added a beforeRouteEnter method which Vue Router calls when the user requests to navigate to this component but before...

Using Vue 3's Router in Practice - Daily.dev

This article covers some standout features of Vue Router like programmatic navigation, navigation guards, data fetching, and nested routes ...

Vue 3 composition api beforerouteenter

In LedgerBalance.vue, the beforeRouteEnter() hook ensures that data is fetched ... Next when Ledger is loaded and the route changes, the setBalance() method ......