Force navigation when clicking on a router-link even if the route doesn't change

[DevanB]

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!

[posva]

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

[DevanB]

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 ***@***.***> 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.

[posva]

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

[DevanB]

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.

[DevanB]

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.

[ByScripts]

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.

[lucianobosco]

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.