Enclosing a router-link tag in a button in vuejs

Question

Can I wrap or enclose a router-link tag in a button tag?

When I press the button, I want it to route me to the desired page.

Answer 1

You can use tag prop.

<router-link to="/foo" tag="button">foo</router-link>

Answer 2

I'm working on Vue CLI 2 and this one has worked for me!

<router-link to="/about-creator">
<button>About Creator</button>
</router-link>

Answer 3

Now days (VueJS >= 2.x) you would do:

<router-link tag="button" class="myClass" id="button" :to="place.to.go">Go!</router-link>

Answer 4

@choasia's answer is correct.

Alternatively, you could wrap a button tag in a router-link tag like so:

<router-link :to="{name: 'myRoute'}">
  <button id="myButton" class="foo bar">Go!</button>
</router-link>

This is not so clean because your button will be inside a link element (<a>). However, the advantage is that you have a full control on your button, which may be necessary if you work with a front-end framework like Bootstrap.

I have never used this technique on buttons, to be honest. But I did this on divs quite often...

Answer 5

While the answers on here are all good, none seem to be the simplest solution. After some quick research, it seems that the real easiest way to make a button use vue-router is with the router.push call. This can be used within a .vue template like this:

<button @click="$router.push('about')">Click to Navigate</button>

Super simple and clean. I hope someone else finds this useful!

Source: https://router.vuejs.org/guide/essentials/navigation.html