CODEWITHSUNDEEP
javascriptvue.jsvue-router
Jamie
Jamie

Reputation: 10886

Vue.js 2.0 router link in a div component

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.

Upvotes: 10

Views: 18064

Answers (3)

akauppi
akauppi

Reputation: 18036

Vue.js 3

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

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.

Upvotes: 7

Saurabh
Saurabh

Reputation: 73589

The Vue Way

If you want <router-link> to render as another tag, in your case div, you can use tag prop to specify which tag to render to, and it will still listen to click events for navigation.

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

You can also do this via one of pure HTML ways:

Way 1

<a href="/home">
    <div>
        Home
    </div>
</a>

Way 2

<div style="cursor: pointer;" onclick="window.location='/home';">
    Home
</div>

You can also modify second way in vue way as following:

<div style="cursor: pointer;" @click="redirectToHome">
    Home
</div>

where you can define redirectToHome method as following:

methods: {
  redirectToHome () {
     this.$router.push(
        {
          path: '/home',
        }
     )
 },

Upvotes: 9

Alex Sakharov
Alex Sakharov

Reputation: 566

Well, router-link has a tag prop. You're looking for this:

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

Upvotes: 17

Related Questions