Включение тега router-link в кнопку в vuejs

Вы можете использовать tagprop .

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

@choasia's answer is correct.

Кроме того, вы можете обернуть buttonrouter-link, например:

<router-link :to="{name: 'myRoute'}">
  <button id="myButton" class="foo bar">Go!</button>
</router-link>

Это не так чисто, потому что ваша кнопка будет находиться внутри элемента ссылки (<a>). Однако преимущество заключается в том, что у вас есть полный контроль над вашей кнопкой, который может потребоваться, если вы работаете с front-end фреймворком, таким как Bootstrap.

Честно говоря, я никогда не использовал эту технику на кнопках. Но я делал это на дивах довольно часто...

Теперь дни (VueJS >= 2.x) вы бы сделали:

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

Я работаю над Vue CLI 2, и это сработало для меня!

<router-link to="/about-creator">
<button>About Creator</button>
</router-link>

Хотя все ответы здесь хороши, ни один из них не кажется самым простым решением. После некоторых быстрых исследований кажется, что самый простой способ заставить кнопку Использовать vue-маршрутизатор - это с помощью router.pushкнопку вызова. Это может быть использовано в рамках .Vue шаблон, как это:

<button @click="$router.push('about')">Click to Navigate</button>

Супер просто и чисто. Я надеюсь, что кто-то еще найдет это полезным!

Источник: https://router.vuejs.org/guide/essentials/navigation.html

Благодаря ответу Уэса Уиндера и расширению его для включения параметров маршрута:

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

И повторяя источник, который предоставил Уэс: https://router.vuejs.org/guide/essentials/navigation.html

Начиная с версии 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>

Методы маршрутизации с использованием метода, а также маршрутизации 1. Соединение маршрутизатора

<router-link to="/login">Login </router-link>

2. При нажатии на кнопку этого типа вызовите другой маршрут.

<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');
        }
    }
}