<router-link> Vue Router @click event

Question

I tried using a click event on a <router-link>. It works, but it is reloading the page everytime the link is clicked. I would like to avoid it but I can't figure out how.

I am aware that <router-link> does not accept a simple @click event. I saw on some forums that @click.I native would work, but as we know, that is deprecated.

So I would like to know if there is any solution other than wrapping the router link in a div and putting the listener on that div.

The reason why I want to do this is that I want to bind a class dinamicaly when the link is clicked. I have created a dropdown menu which is triggered onClick. But then when I follow a link inside that dropdown menu, the menu remains open. Therefore, I would like to have an additional @click event to dinamically bind a class (display: none) to the dropdown menu. The thing is that the items inside the dropdown are iterated which send parameters to a Vuex Mutation and therefore i can’t use regular tags and wrapping the router-links with a span or div is also not giving me the desired effect.

Thank you !

Regards,

T.

You didn't explain why you need to override this click event. Maybe you should go by a route in a click handler of some DIV instead of using router-link? — Anatoly
– Anatoly, Commented Dec 5, 2020 at 22:43

Slaveworx · Accepted Answer · 2020-12-08 17:43:46Z

2

I have managed to solve the problem using a div wrapper and changing my css (that was preventing the code to work properly)

 <div class="dropdown">
        <a class="dropbtn" @click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
        <div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
          <div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" @click="dropClick">
            <router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
            </router-link>
          </div>
        </div>
      </div>

answered Dec 8, 2020 at 17:43

Slaveworx

6293 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gurkan Ugurlu · Accepted Answer · 2020-12-05 23:37:34Z

1

If a understand your question, there is a "active-class" property on vue-router(router-link). You can set your classes dynamically by based on an active route.

edited Dec 5, 2020 at 23:37

answered Dec 5, 2020 at 23:32

Gurkan Ugurlu

4672 silver badges8 bronze badges

3 Comments

Slaveworx Over a year ago

I have created a dropdown menu which is triggered onClick. Bu then when I follow a link inside that dropdown menu, the menu remains open. Therefore, I would like to have an additional @click event to dinamically bind a class (display: none) to the dropdown menu. The thing is that the items inside the dropdown are iterated <router-link> which send parameters to a Vuex Mutation and therefore i can’t use regular <a> tags and wrapping the router-links with a span or div is also not giving me the desired effect.

Gurkan Ugurlu Over a year ago

There is a "event" property on router-link. router.vuejs.org/api/#event You can look here. I hope this works.

Slaveworx Over a year ago

I don’t believe that this property is what I need. But thank you for your input!

Collectives™ on Stack Overflow

<router-link> Vue Router @click event

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related