Vue.js 2.0 router link in a div component

Question

I can link like this in vue.js 2.0:

<router-link to="home">Home</router-link>

This compiles to an a tag. But how do I do this with a div?

With vue.js 1.0 I did it like this:

<div v-link="{ name: 'Messages', params: { topic: topic.slug }}">test</div>

That's obviously not working anymore.

Answer 1

Vue.js 3

Disclaimer: the question is about Vue.js 2. I saw that.

• tag attribute is no more

Instead, do a v-slot such as:

<router-link to="/about" custom v-slot="{ navigate }">
  <div role="link" @click="navigate">test</div>
</router-link>

• custom prevents the creation of an a element
• navigate is the function provided for the div, to activate navigation
• role="link" is accessibility stuff (you could omit it), but can also be used for CSS'ing the hand mouse cursor

CSS:

[role="link"]:hover {
  cursor: pointer;
}

One could also just let the a remain, since browsers are now better at dealing with a display:block a, but that's another story.