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

@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 3

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

Answer 4

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

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

Answer 5

Thanks to Wes Winder's answer, and extending it to include route params:

<button @click="$router.push({name: 'about-something', params: { id: 'abc123' },})">Click to Navigate</button>

And reiterating the source which Wes provided: https://router.vuejs.org/guide/essentials/navigation.html

Answer 6

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 7

As of Vue 3.1.0, the ideal way is to use the slots api.

@choasia's answer doesn't allow for props to be passed to the component
@Badacadabra's answer causes problems with library-buttons (such as button margins)

Here's how the solution would work with the slots API

<router-link
  to="/about"
  v-slot="{ href, route, navigate}"
  >
    <button :href="href" @click="navigate" class='whatever-you-want'>
      {{ route.name }}
    </button>
</router-link>