Включение тега router-link в кнопку в vuejs
Можно ли обернуть или вложить router-link
в тег button?
Когда я нажимаю кнопку, Я хочу, чтобы она направила меня на нужную страницу.

Ответы - Включение тега router-link в кнопку в vuejs / Enclosing a router-link tag in a button in vuejs





11.08.2017 06:27:44
@choasia's answer is correct.
Кроме того, вы можете обернуть button
router-link
, например:
<router-link :to="{name: 'myRoute'}">
<button id="myButton" class="foo bar">Go!</button>
</router-link>
Это не так чисто, потому что ваша кнопка будет находиться внутри элемента ссылки (<a>
). Однако преимущество заключается в том, что у вас есть полный контроль над вашей кнопкой, который может потребоваться, если вы работаете с front-end фреймворком, таким как Bootstrap.
Честно говоря, я никогда не использовал эту технику на кнопках. Но я делал это на дивах довольно часто...





02.12.2018 09:33:36
Я работаю над Vue CLI 2, и это сработало для меня!
<router-link to="/about-creator">
<button>About Creator</button>
</router-link>

12.12.2018 10:01:42
Хотя все ответы здесь хороши, ни один из них не кажется самым простым решением. После некоторых быстрых исследований кажется, что самый простой способ заставить кнопку Использовать vue-маршрутизатор - это с помощью router.push
кнопку вызова. Это может быть использовано в рамках .Vue шаблон, как это:
<button @click="$router.push('about')">Click to Navigate</button>
Супер просто и чисто. Я надеюсь, что кто-то еще найдет это полезным!
Источник: https://router.vuejs.org/guide/essentials/navigation.html


28.03.2019 11:30:07
Благодаря ответу Уэса Уиндера и расширению его для включения параметров маршрута:
<button @click="$router.push({name: 'about-something', params: { id: 'abc123' },})">Click to Navigate</button>
И повторяя источник, который предоставил Уэс: https://router.vuejs.org/guide/essentials/navigation.html

22.10.2019 03:05:18
Начиная с версии Vue 3.1.0, идеальным способом является использование slots api.
ответы @choasia не позволяют реквизит должны быть переданы в компонент
Ответ @Badacadabra вызывает проблемы с библиотечными кнопками (например, полями кнопок)
Вот как это решение будет работать с API слотов
<router-link
to="/about"
v-slot="{ href, route, navigate}"
>
<button :href="href" @click="navigate" class='whatever-you-want'>
{{ route.name }}
</button>
</router-link>


06.01.2020 11:08:28
Методы маршрутизации с использованием метода, а также маршрутизации 1. Соединение маршрутизатора
<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');
}
}
}