vue-router: Is there any way to force navigation when clicking on a router-link even if the route doesn't change?

What problem does this feature solve?

Reload current page’s state or refresh the page.

For example, I have a <HeaderBar> which contains a Home button, just like the Facebook one. If I’m in another page (rather than Home), when I hit this button, it will navigate to Home. But when I’m in Home page, hit this button it does nothing.

It’s expected to reload the page, and scroll to the top, right?

Please don’t tell me to write out an action to refresh the state and scroll to top. This header bar is a shared component, and the Home button can be hit at any where.

What does the proposed API look like?

Some thing like

<router-link :to="{ name: 'Home', force: true }">Home</router-link>

this.$router.replace({ name: 'Home', force: true });

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 19 (2 by maintainers)

Most upvoted comments

You can reload the page, but you should handle the refresh in a click handler if you want to have that custom behaviour

Duplicate of https://github.com/vuejs/vue-router/issues/974

+28

posva on Nov 18, 2019

Same problem. Resolved : click link profile event:

() => window.location.href= `/profile/${userId}`

+18

cafe4it on May 7, 2019

@leoyli

Yeah, I’ve tried to bind a key to router-view before, but it didn’t work.

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

Since the fullPath have no changes, how does it suppose to reload the page?

Can you give me an example, plz. Talk is cheap, you know.

+14

trandaison on Oct 28, 2018

yeah, they are not supposed to be triggered as you are in the same route with no param change or whatsoever… You need to refactor the code in methods and call them in both places. Cheers

+13

posva on Oct 17, 2018

I’ve just ran into this problem also.

Use case:

Router setup as /profile/:userId to a component called “Profile”
On the profile it loads the data from a api call, however let’s say I have a “Friends” tab on the page and I click their profile :to profile with the userId params
It won’t load because the component is already loaded

n10000k on May 4, 2019

Try: npm i vue-state-router instead of vue-router. Totally same API. Gives you these feature:

when navigate with push mode, every component will be reload, and scroll back to top
when with replace mode, every component will reuse, and scroll to saved position

masquevil on Dec 2, 2018

This is my trick to get through this situation:

Create a component named <base-link> just likes the <router-link> and use this one instead of <router-link>.
If the :to route is different from the current route, render <router-link> in the template.
Else, render a <a> tag with :href=this.$router.resolve(this.to).route.fullPath and add an click event handler to redirect to another page named ‘Refresh’;
In the Refresh page, replace the route back to the referer.

Everything works just fine so far.

trandaison on Nov 20, 2019