Prevent route change in Vue router

Question

<router-link to="SOME_ROUTE">
    <div class="outer-div">
        <div class="inner-div" v-on:click="doSomething"></div>
    </div>
</router-link>

Some I am trying to create a link which will have a image in it. I am trying to make the inner div to do something without triggering the route change, how am I be able to achieve this? I have tried the event modified v-on:click.stop, but it doesn't seem to work, the route will still change after the .inner-div is clicked. Thanks in advance for your kind help.

How does the rendered dom look like? – choasia Aug 28 '17 at 02:14 — choasia, Aug 28 '17 at 02:14

score 2 · Accepted Answer · answered Aug 28 '17 at 03:57

2

I think you just need to use

<div class="inner-div" v-on:click.prevent="doSomething"></div>

instead of

<div class="inner-div" v-on:click.stop="doSomething"></div>

to prevent the default action. See: https://stackoverflow.com/a/8952200/6279569
Here's the demo.

answered Aug 28 '17 at 03:57

choasia

10,404
6
40
61

Great! That' exactly what I wanted! Thanks! – Leonard Ge Aug 28 '17 at 04:17

Prevent route change in Vue router

1 Answers1