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

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 3

As of Vue-Router 3.1.0, the ideal way is to use the slots api.
Documentation Here

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

Answer 4

    // literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

Answer 5

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

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

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>