Enclosing a router-link tag in a button in vuejs

Solution 1:

You can use tag prop.

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

Solution 2:

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