Do we have router.reload in vue-router?

Question

I see in this query pull :

• Add router.reload()

  Reboot with the current path and call the data again

But when I try to execute the following command from the Vue component:

 this.$router.reload() 

I get this error:

Uncaught TypeError: this.$router.reload is not a function

I searched in the documents , but could not find anything relevant. Does the vue / vue-router provider have this functionality?

Software versions that interest me:

 "vue": "^2.1.0", "vue-router": "^2.0.3", 

PS. I know that location.reload() is one of the alternatives, but I'm looking for my own version of Vue.

Answer 1

this.$router.go() does just that; if no arguments are specified, the router goes to the current location, refreshing the page.

As for "why is this so": go internally passes its arguments to window.history.go , so it is equal to windows.history.go() - which, in turn, reloads the page according to the MDN document .

_{note: since it performs a “soft” reboot on a regular desktop (non-portable) Firefox, a lot of strange quirks may appear when using it, but you really need a real reboot; using window.location.reload(true); ( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) the mentioned OP can help instead - it definitely solved my problems with FF.}

Answer 2

The easiest solution is to add the attribute: key to:

 <router-view :key="$route.fullPath"></router-view> 

This is due to the fact that Vue Router does not notice any changes if the same component is accessed. Using the key, any change to the path will cause the component to restart with new data.

Answer 3

I am checking the vue-router repository on GitHub and it seems that the reload() method does not exist. But in the same file there is: currentRoute object.

Source: vue-router / src / index.js
Documents: docs

 get currentRoute (): ?Route { return this.history && this.history.current } 

Now you can use this.$router.go(this.$router.currentRoute) to this.$router.go(this.$router.currentRoute) current route.

A simple example .

Version for this answer:

 "vue": "^2.1.0", "vue-router": "^2.1.1" 

Answer 4

I used this: this.$router.push('')

Version:

 "vue": "^2.5.13", "vue-router": "^3.0.1" 

Answer 5

This is my reboot. Because of some kind of browser, it’s very strange. location.reload cannot reload.

 methods:{ reload: function(){ this.isRouterAlive = false setTimeout(()=>{ this.isRouterAlive = true },0) } } 

 <router-view v-if="isRouterAlive"/> 

Answer 6

For re-display, you can use in the parent component

 <template> <div v-if="renderComponent">content</div> </template> <script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // Remove my-component from the DOM this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; }); } } } </script> 

Answer 7

 function removeHash () { history.pushState("", document.title, window.location.pathname + window.location.search); } App.$router.replace({name:"my-route", hash: '#update'}) App.$router.replace({name:"my-route", hash: ' ', params: {a: 100} }) setTimeout(removeHash, 0) 

Notes:

1. And # should have some meaning after it.
2. The second route hash is a space, not an empty string.
3. setTimeout , not $nextTick to keep the URL clean.