11

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

2

8 Answers 8

7

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.

1
  • a light on the js / vue / trip :clap :clap XD
    – Carlos
    Mar 21, 2020 at 6:14
3

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.

2
  • 1
    should be 'route' not 'router'. but other than that it works very well! thank you Dec 29, 2022 at 14:04
  • He is asking for clicking on router-link which is the same page, not pages with the same component. This won't work.
    – Pui Ho Lam
    Apr 21 at 14:26
2

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()
     }
   }
1
  • 2
    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
    – Hammerbot
    Nov 7, 2018 at 16:21
2

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

:key="$route.fullPath"

<router-view :key="$route.fullPath"/>
2
  • really clean. i like it
    – Johnny
    Feb 19, 2022 at 4:14
  • very good! works like a charm Dec 29, 2022 at 14:03
1

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.

0

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

1
  • 3
    Thanks, tried it before - they won't fire if the route stays the same
    – Himberjack
    Nov 8, 2018 at 11:04
0

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.

1
  • How would this affect browser history and the URL?
    – Kalnode
    Jan 20, 2021 at 1:24
0

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.

5
  • If the page has a table fetched from the web, the user may want to just click on the same link to refresh the table rather than having a separate button to do that. And every link has also the similar content rendered based on web service provider. So every page should be reloadable.
    – Pui Ho Lam
    Apr 21 at 14:28
  • @PuiHoLam If you want user clicks on the same link to refresh the page. You should use event to update the change instead of rebuilding whole page. Never reload the page/component.
    – shtse8
    Apr 24 at 9:31
  • When you change data on the component, it rerenders anyway. It's still much faster than the user pressing F5 out of frustration. The problem is development time where you need to code a lot of stuff for parent and children communication, esepcially when they are router links. I do have a solution that requires minimal coding for refreshing the page.
    – Pui Ho Lam
    Apr 25 at 17:13
  • @PuiHoLam if you concern the developer time, and that is. but once you know how to use event bus to refresh the data, it won't you take you much time to develop it. and least you can wrap it as a function and reuse it on pages you need.
    – shtse8
    May 14 at 13:52
  • It isn't just that. Clicking on a link and seeing the page refresh has always been the default behaviour that internet users expect from a web browser. You'd make a refresh button for refreshing only the table data if you're concerned about that. Users may expect new things to happen to the page after the page refresh, not just the data.
    – Pui Ho Lam
    May 15 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.