Menu
To reload a route with Vue Route, we can call the this. $router.go() method. If it has no arguments, then it'll reload the current route. This way, it'll notice when the path changes and it'll trigger a reload of the component with new data.
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
Vue Router uses special link elements called <router-link> that have a to attribute that map to a component. When we run our app, we should see our home component rendering. If we click our router-link elements, the content will change and the URL will too!
vue file. Lazy loading refers to an approach by which all the scripts are not loaded on the DOM as the application starts. Instead, they're only loaded when requested, which makes the JavaScript bundle size very small at initial load. Vue.
this.$router.go() does exactly this; if no arguments are specified, the router navigates to current location, refreshing the page.
note: current implementation of router and its history components don't mark the param as optional, but IMVHO it's either a bug or an omission on Evan You's part, since the spec explicitly allows it. I've filed an issue report about it. If you're really concerned with current TS annotations, just use the equivalent
this.$router.go(0)
As to 'why is it so': go internally passes its arguments to window.history.go, so its equal to windows.history.go() - which, in turn, reloads the page, as per MDN doc.
note: since this executes a "soft" reload on regular desktop (non-portable) Firefox, a bunch of strange quirks may appear if you use it but in fact you require a true reload; using the
window.location.reload(true);(https://developer.mozilla.org/en-US/docs/Web/API/Location/reload) mentioned by OP instead may help - it certainly did solve my problems on FF.
The simplest solution is to add a :key attribute to :
<router-view :key="$route.fullPath"></router-view>
This is because Vue Router does not notice any change if the same component is being addressed. With the key, any change to the path will trigger a reload of the component with the new data.
this.$router.go(this.$router.currentRoute)
Vue-Router Docs:
I checked vue-router repo on GitHub and it seems that there isn't reload() method any more. But in the same file, there is: currentRoute object.
Source: vue-router/src/index.js
Docs: docs
get currentRoute (): ?Route {
return this.history && this.history.current
}
Now you can use this.$router.go(this.$router.currentRoute) for reload current route.
Simple example.
Version for this answer:
"vue": "^2.1.0",
"vue-router": "^2.1.1"
Use router.go(0) if you use Typescript, and it's asking arguments for the go method.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With