vue-router
vue-router copied to clipboard
vuejs
Force navigation when clicking on a router-link even if the route doesn't change
Hey there. This is more of a question than a bug, but could turn into a feature request, if there is no way to currently handle this.
tl;dr; - Is there some way for me to use a global hook and run some code regardless if the current page is the page that will be navigated too?
I'm trying to call some methods (Vuex commits actually) in the vue-router beforeEach or afterEach hooks. These methods do things like closing the navigation, which need to be ran when clicking every link in the application. Everything works like a charm, until the user clicks a link to the page they are currently on. It seems (as it should) that the page doesn't actually change, but also that none of the hooks are called.
Thanks!
It makes sense not to call the hooks because there's no navigation since it's the same route. @DevanB What code do you need to run on that case?
Edit: The easiest workaround to trigger a new navigation is to include a fake query or hash so the route is indeed different and the navigation isn't aborted, e.g. $router.push({ query: { ...$route.query, t: Date.now() }})
I'm trying to run a Vuex commit to close the navigation either before or after the route transition.
It does make sense for the hooks not to run because no navigation is happening, but I assume that is overridable somehow. If not, I guess I have to dump <router-link> tags and go to straight anchor tags to bind a method, call my Vuex commit and then manually push the navigation (if it's not already on the page). All of that seems lengthy just to run some arbitrary code if it wasn't possible to somehow write it in one place (a hook for instance) and have it run each time. Even if I had to do the check if it's the same route that's fine, because it's less code to declare it in one place than binding a method every link in my entire app and manually navigating.
On Dec 9, 2016, at 03:14, Eduardo San Martin Morote [email protected] wrote:
It makes sense not to call the hooks because there's no navigation since it's the same route. @DevanB What code do you need to run on that case?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
You can also create a custom component that binds the right vuex action to the click event on top of using a router-link element
Didn't think about that! I will give it a shot. Thanks for the suggestion! Keep up the great work! Maybe one day I'll have the pleasure of being a collaborator on Vue; really enjoying working with it.
Just an update for any people that may want to solve this in a similar manner. I solved it by creating, importing and using this component, instead of router-link:
RouterLink.vue
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([ 'closeIsiAndNavigation' ])
},
name: 'RouterLink',
props: {
to: {
type: String,
required: true
},
tag: {
type: String,
required: false,
default: 'a'
}
},
render (h) {
return (
<div onClick={ this.closeIsiAndNavigation }>
<router-link to={ this.to } tag={ this.tag }>{ this.$slots.default }</router-link>
</div>
)
}
}
</script>
Again, thanks for the suggestion @posva. It's working beautifully.
IMO, Vue Router should respect the "default" behavior of any "normal" link.
On a simple HTML page, when clicking on the link of the page we already are on, the page reload. And I think Vue Router should not alter this default behavior, because it's what most user using the web is expecting.
Still no native solution for this? My customers are reporting that the expected behavior (refreshing the page) is not working. I would like to avoid any js hack or dirty solutions.
I just made a similar comment in #2963, but it seems relevant here as well (and also this issue is still open 😉 ). I believe there are three different use-cases hidden behind a duplicate navigation:
-
reload(as reported in the current issue) -
reject(as is the current behaviour as of #2862) -
ignore(as in #2963 and #2872 and was the behaviour before #2862)
My suggestion is to make this configurable like so:
const router = new Router({
routes: [],
duplicateNavigationPolicy: 'reload' // other options: 'ignore' and 'reject'
})
I'd be happy to try and open a PR over the weekend, if this is something that would be considered.
Edit: Changed the suggested configuration value for the current behaviour to reject
+1 -- this seems like a common problem for a burger-button type mobile navigation that takes up the whole screen. Everything works until the user clicks the link for the current page. Rather than implementing a custom wrapper component or handling native DOM clicks, it seems like I should be able to listen to the router for some type of hook that will always fire regardless of where the router-link leads to.
Not quite the same as what @dominik-bln suggested above. I would recommend the router always firing an event, on each navigation "attempt" regardless of outcome.
This is the exact issue I'm currently trying to see if there is a solution to. Ideally route-link already has the ability to do exact matching to set the active class. So in the case, if exact is specified, or as mentioned, allow the user re-clicks the same link, the router should be configurable. I'm still learning vue, so I'd be happy to see what @dominik-bln was able to come up with.
Without this capability, there is no way to force the route to be accepted in overrides like beforeEach, which currently causes a recursive stack overflow.
My example is something like the following:
<router-link to="/nav?url=url1.com" exact exact-active-class="active" ><span class="mdi mdi-bing"></span ></router-link> <router-link to="/nav?url=url2.com" exact exact-active-class="active" ><span class="mdi mdi-earth"></span ></router-link>
In this case, the url parameter is different but the route path is the same (resulting in a fullPath difference, but not a path difference).
I didn’t do anything here yet, as I’d like to get feedback from a maintainer first on whether a PR like this would even be considered.
I also think this behavior is really annoying. I often click a link again, to reload the news, restart the form input or just start from scratch. Vue should mimic the default browser behavior or at least it should be configurable. I can't imagine a reason why it is implemented the way it is. The user clicks a link, so the user wants obviously something to happen.
At the moment it is very difficult to manage. Many solutions are taking about @click.native but this doesn't work as the router operation is executed first and then the click handler. I ended up with some pages being loaded twice at each click
What I came up with is the following:
1.
<router-view :key="this.$store.state.ui.navigationClicked"></router-view>
2. And a custom Component with a mousedown event firing before the router executes:
<router-link
@mousedown.native="mousedown"
...
mousedown() {
if (this.$route.path === this.path) {
this.$store.commit("navigationClicked");
}
},
I really think this should be fixed inside Vue.js.
@kicktipp you solution that writted above is working? Could you explain it more exactlies? We are catching event and calling vue router hook manually in $store internally?
I'd also like to see this implemented or implement it myself and provide this as a PR. I'd like it to do a data reload and scroll to the top again (depending on the custom scroll behavior), as clicking a link and doing nothing is a really bad user experience.
I guess there should be a global hook and per-component hooks?
See #3114 for a possible implementation. As long as that PR isn't merged, it can still be accomplished by forking the RouterLink component. I suggest a wrapper component that implements the :on-abort handler automatically for each link and maintains the state somewhere, probably in the root component?
Would be helpful to have a recommendation here in this issue for how to solve this use case generally prior to 4.x.
In my application, like others that have been described, I have a navigation pane (v-navigation-drawer with v-list) with links (each v-list-item has a 'to' property) and need each link to always fetch the latest data from the server, including re-clicking the same link we are on now.
The current loader is triggered by a watcher on $route() as well as when created() is fired. A v-on:click method fires after navigation, so it isn't possible to tell whether navigation happened or not, and I don't want to redo the loading from the server if it did.
I agree I think something is needed rather than waiting for the mean time.
The only thing I can suggest is watch for the route change.
@posva: You added the "has workaround" tag but what is the recommended workaround for this?
I have a partial workaround I've used for situations involving form submission based on response details but I would prefer a one size fits all straightforward approach as mentioned in #2430 or above (details listed below).
I think the best approach would be to make <router-link> link agnostic, i.e. if the user clicks on a link the router should not care about the link destination and instead perform all the standard operations to navigate to that route such as navigation guards, mounting, beforeRouteEnter, beforeRouteUpdate, etc. just as is the case if the user clicks F5 to reload the whole page. It should be up to the developer to disable or not provide a link if the user should not click it.
==============================================================================
Partial Workaround:
==============================================================================
Potential Solution described in #2430:
==============================================================================
Potential Solution described in #974 (above):
This is extremely relevant. Currently, I'm basically forced to put a "Back to top" link in the page's footer and always end up with at least one dead link to the same page. It would be really useful if we could just listen for changes to the same route somehow.
This really should be addressed. Vue Router is currently incompatible with how the web works. Gmail, YouTube, Facebook, GitHub -- they all perform some action when a link that is already active is clicked; some of them even completely reload the view, just like non-SPA sites do. Ignoring active links by default in Vue Router could be a premature optimization, but the lack of a configuration option is a significant flaw.
Edit: I've implemented my own router library to circumvent this: https://github.com/adamsol/vue-pocket-router.
so is update going to be done or not?
The are legitimate use cases in loading the exact same URL but with different underlying params.
For vue-router 4 there seems to be an undocumented API: <router-link :to="{path:'/mypath', force: true}"> (source).
Is the force api working for anyone in vue-router 4?
@posva Is it fixed in 4?
works for me if router-view has :key with unique value
"vue-router": "4.0.12"
There is now an RFC that solves this issue through a higher level feature: Data Loaders: https://github.com/vuejs/rfcs/discussions/460
In particular, the refresh() method allows to call fetching again. If you are interested in this feature, please, check the mentioned RFC to give feedback 🙏
I have a simple idea to solve this feature and maybe more flexible, I wrote my idea at this RFC: https://github.com/vuejs/rfcs/discussions/483
This RFC provides a router lifecycle that allows us to do something when the user navigates to the same route as the current page, through this lifecycle we can have more flexibility to update specific data without reloading all pages.
If this feature can help to the situation you are facing or if you have more suggestions for this RFC, welcome to feedback.
