Cannot prevent router-link event

[floorish]

It looks like the click event on the <router-link> is handled before any custom click events:

<router-link to="/b" @click.native.prevent="clicked">should NOT route to b</router-link>

const app = new Vue({
  router,
  methods: {
  	clicked: function(e) {
        // Does not prevent route change
    	e.preventDefault()
    }
  }
  
})

See working fiddle: https://jsfiddle.net/floorish/zhyqgqpz/
The <router-link> component checks e.defaultPrevented here : https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L49 , but that is still false when it checks the condition.

Only workaround I've found is to capture the event on a parent element (included in fiddle).

Vue version: 2.0.7
Vue-router version: 2.0.2
Possibly related to: #390

[yyx990803]

I think we will add a disabled prop to <router-link> in the next feature release.

[floorish]

I don't think that'll solve the following use case:

<router-link to="/next" @click.native="confirm">next</router-link>

const app = new Vue({
  router,
  methods: {
    confirm: function(e) {
        if ( ! window.confirm('Are you sure?')) {
          e.preventDefault()
        }
        // else continue to route
    } 
  }
})

[LinusBorg]

@floorish that should rather be taken care of in the beforeRouteLeave hook, I think.

[floorish]

@LinusBorg
Well you can't if you're routing to the same route, but different param, e.g.:

You're on /1

const Component = {
  template: '<div><router-link to="/2" >next</router-link></div>',
  beforeRouteLeave: function(to, from, next) {
        // not executed when route stays the same, but only params change
    next(false)
  }
}

const routes = [{
  path: '/:id',
  component: Component,
}]
const app = new Vue({
  router,
})

Which is also something that changed from vue-router 1 => vue-router 2
In this case watch: '$route' does not make sense, since it's triggered after the route change.

[LinusBorg]

That is indeed the case currently, but that real problem here is that the hooks are not called, so the issue should be resolved in that realm (and I think there is an open issue about it but I can't seem to find it^^).

Shoe-horning a workaround into <router-link> does not appear to be not a proper solution to me.

[floorish]

You're right—it's a related, but different issue.

Still I'd rather have the custom click event execute before the <router-link> event in the case that you have multiple <router-link>s.

<router-link to="/dashboard" >back</router-link>
<router-link to="/2" @click.native="confirm" >next</router-link>

This reads more natural to me than checking the to param in the beforeRouteLeave hook and branch there.

See also the discussion here: #390

[yyx990803]

You can programmatically check the to route in the leave hook. Anyway, I think this is just a matter of preference and we'd rather recommend only one way of achieving it for consistency.

[floorish]

@yyx990803 You can't check the to route in all situations:

<router-link to="/dashboard" >cancel</router-link>
<router-link to="/dashboard" @click.native="save" >save</router-link>

But I guess in that case you don't use <router-link> at all and let the custom click handler route to the next step?

[fnlctrl]

Yes, in that case you should just use a plain button and navigate with "router.push"

…

On Tue, Nov 29, 2016, 17:25 floorish ***@***.***> wrote: @yyx990803 <https://github.com/yyx990803> You can't check the to route in all situations: <router-link to="/dashboard" >cancel</router-link> <router-link to="/dashboard" @click.native="save" >save</router-link> But I guess in that case you don't use <router-link> at all and let the custom click handler route to the next step? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#916 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFTLlxUpKX-cMcixUJH_NaWQWRqq3BfXks5rC--igaJpZM4K2ZZN> .

[vkruoso]

I have a use case where the user must be logged in to access the target page. If the user is not logged in, a modal will show up and the route navigation should be avoided. I could use a button or something else that is not an a tag and use router.push, but that prevents the browser to open the page on a new tab correctly. I ended up using the event prop to prevent the router-link to listen to the click event. Here is a sample:

<router-link :to="{ name: 'my-favorites' }"
             :event="''"
             @click.native.prevent="routeOrLogin({ name: 'my-favorites' })">
  Favorites</router-link>

Where the routeOrLogin method will check if the user is logged in and redirect if so, using router.push, or open the login modal otherwise.

[mbraint]

@vkruoso good descision!
In my case i simplify it like that:

export default {
  props: {
    disabled: Boolean
  }
}

<router-link :to="/foo"
             :event="disabled ? '' : 'click'">
  Foo</router-link>

[tayanefernandes]

@yyx990803 When will we have the disabled prop to <router-link>?

[gvdonovan]

Router Link Changes when route is cancelled via component hook. I have an app with tabs - each tab is a router-link. When I navigate from a route that has unsaved data I save the data and prevent the route from proceeding in the event there are errors via the component hook. However, the link the user clicked on is still set to the active route - what am I missing?

Here's the component code:

beforeRouteLeave: function (to, from, next) {
            var self = this;
            self.save( { callback: proceed } );

            function proceed() {
                if (self.validationErrors.length === 0) {
                    next();
                } else {
                    next(false);
                }
            }
        },