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.
Join Stack Overflow to learn, share knowledge, and build your career.
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.
You can use tag
prop.
<router-link to="/foo" tag="button">foo</router-link>
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
@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...
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
Now days (VueJS >= 2.x) you would do:
<router-link tag="button" class="myClass" id="button" :to="place.to.go">Go!</router-link>
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 CSS especially if the button is from a library (ex: adding a margin, or positioning)
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>
Routing methods using method as well routing 1. Router link
<router-link to="/login">Login </router-link>
<template> <input type="submit" value="Login" @click="onLogIn" class="btn float-right btn-primary"> </template>
<script>
export default {
name:'auth',
data() {
return {}
},
methods: {
onLogIn() {
this.$router.replace('/dashboard');
}
}
}
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>
// 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' } })
An example using bootstrap-vue and creating a link with the id inside a table row:
<b-table :fields="fields" :items="items">
<template v-slot:cell(action)="data">
<router-link :to="`/rounds/${data.item.id}`" v-slot="{ href, route, navigate}">
<b-button :href="href" @click="navigate" color="primary" style="text">{{ data.item.id }}</b-button>
</router-link>
</template>
</b-table>
Where fields
and items
are the columns names and the table content, respectively.