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

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

Answer 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="$route.fullPath"

which will guarantee to remount on every change to path.

Answer 3

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()
     }
   }

Answer 4

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

:key="$route.fullPath"

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

Answer 5

Consider using @click (or @click.native) on a <router-link> to execute your customs code when the user clicks on it.

Now this seems like a bad idea because you will have to use that method on every <router-link> in any component. A solution would be to wrap the <router-link> pseudo component with another component conveniently(!) called routerLink == <router-link>. I already do something similar with the original <transition> component and it works like a charm. this doesn’t solve the problem of having to import that component and use it inside all components needing <router-link>, but it will mean you have a centralized place to add your custom logic for a clicking event and not repeating it again or modifying it in multiple places when you need to.

I don’t have an available Vue.js project right now to test this on, so if the @click(.native) approach doesn’t work because <router-link> is a pseudo component, just apply the event listener to the newly created custom component.

Answer 6

This is what you are looking for Vue-Router Navigation Guards

Answer 7

If you can modify route-link to this.$router.push in a component, and if you don't want to reload whole page like window.location.reload(), consider push a not existing route, then push the same route immediately.

this.$router.push({ name: 'not existing' })
this.$router.push({ name: yourRouteName })

side effect: Vue will warn: [vue-router] Route with name 'not existing' does not exist in console.

Answer 8

Short answer, no.

You never need to rerender the same component. Same route means same component. So you can't listen to the route change in component as there is nothing trigger on same route. It is a performance waste to rerender the same thing. What you only need to execute some logic when someone clicking on the same route.

You would like to use useEventBus or provide / inject to pass data to child component from parent. for example, reloading a query when clicking on the home link. but not re-render the whole child component.