VueJS reload if in the same route

Question

We want that if we click on router-link which is the same page, the page will reload.

How can that be done? watch->$route doesn't invoke if the page stays the same

Solution 1

If your need is just "refresh" the component due to a route parameter change, try this:

// define a watcher 
watch: {
    "$route.params.id"(val) {
      // call the method which loads your initial state
      this.find();
    },
},

where "id" comes from /myroute/:id and find() is a regular method.

Solution 2

One of the options is to use key on RouterView:

<RouterView :key="whenThisVarChangeRouterViewWillBeRemounted" />

Just make sure to put key to something sensible if you don't want to reload on every router view change otherwise you could use:

:key="$router.fullPath"

which will guarantee to remount on every change to path.

Solution 3

Dec, 2021 Update:

You can force-reload components by adding :key="$route.fullPath".

For Child Component:

<Child :key="$route.fullPath" />

For router-view tag:

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

However, :key="$route.fullPath" only can force-reload the components of the different route but not the components of the same route. To be able to force-reload the components of the same route as well, we need to add "value" with an array to :key="$route.fullPath" and change "value". So it becomes :key="[$route.fullPath, value]" and we need to change "value".

*We can assign Array to :key=.

<template>
  <Child 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @childReload="reload" // Call @click="$emit('childReload')" in   
  />                      // Child Component to increment the value.
</template> 

    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR

<template>
  <router-view 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')"
  />                           // in Child Component to increment the value.
</template>
    
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    reload() {
      this.value++;
    }
  }
}
</script>

However, to keep using both $route.fullPath and value causes some error sometimes so only when some event like Click happens, we use both $route.fullPath and value. Except when some event like Click happens, we always need to use only $route.fullPath.

This is the final code:

<template>
  <Child 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @childReload="reload" // Call @click="$emit('childReload')" in
  />                      // Child Component to increment the value.
</template>
    
    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR
    
<template>
  <router-view 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')" in
  />                           // Child Component to increment the value.
</template>
        
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      state: true,
      value: 0,
    };
  },
  methods: {
    reload() {
      this.state = false;
      this.value++;
      this.$nextTick(() => this.state = true);
    }
  }
}
</script>

Unfortunately, there are no simple ways to force-reload components properly in Vue. That's the Vue's problem which is needed to solve.

Solution 4

You can use "beforeEnter" Doc.

   { 
     path: '/foo', component: Foo,
     beforeEnter: (to, from, next) => {
       /*
        todo check if to === from
        Warning!: location.reload()  completely destroy all vuejs stored states
        */
        window.location.reload()
        return next()
     }
   }

Solution 5

work for me :) set below code in router-view

:key="$route.fullPath"

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

View more solutions

Comments

[Hammerbot]

I'm not sure that the hook will be called if the user is on the same page as the link he just clicked on

[Himberjack]

Thanks, tried it before - they won't fire if the route stays the same

[Carlos]

a light on the js / vue / trip :clap :clap XD

[MarsAndBack]

How would this affect browser history and the URL?

[Alex]

for me this solution of using a key on router-view breaks the keep alive functionality. I.e. page is reloaded every time.

[Alex]

EDIT: when router-view is used in combination with keep-alive then the key must be placed on component itself, as stated in this answer stackoverflow.com/questions/66215625/…

[Johnny]

really clean. i like it