Do we have router.reload in vue-router?

Question

I see in this pull request:

• Add a router.reload()

  Reload with current path and call data hook again

But when I try issuing the following command from a Vue component:

this.$router.reload()

I get this error:

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

I searched in the docs, but could not found anything relevant. Does vue/vue-router provider some functionality like this?

The software versions I'm interested in are:

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

PS. I know location.reload() is one of the alternatives, but I'm looking for a native Vue option.

Answer 1

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

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

Answer 2

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.

Answer 3

I check 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"

Answer 4

It's my reload. Because of some browser very weird. location.reload can't reload.

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

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

Answer 5

For rerender you can use in 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 6

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 the # must have some value after it.
2. The second route hash is a space, not empty string.
3. setTimeout, not $nextTick to keep the url clean.