Включення тегу посилання маршрутизатора в кнопку у vuejs

Чи можу я обернути або вкласти router-linkтег у buttonтег?

Коли я натискаю кнопку, я хочу, щоб вона спрямовувала мене на потрібну сторінку.

Ви можете використовувати tagprop .

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

Хоча відповіді тут добрі, жодне, здається, не є найпростішим рішенням. Після деяких швидких досліджень, здається, що найпростіший спосіб зробити кнопку за допомогою vue-router - це router.pushдзвінок. Це можна використовувати в шаблоні .vue таким чином:

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

Супер простий і чистий. Сподіваюсь, комусь ще це стане в нагоді!

Джерело: https://router.vuejs.org/guide/essentials/navigation.html

Відповідь @choasia правильна.

Як варіант, ви можете обернути buttonтег у router-linkтег приблизно так:

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

Це не так чисто, тому що ваша кнопка буде всередині елемента посилання ( <a>). Однак перевага полягає в тому, що ви маєте повний контроль над кнопкою, що може знадобитися, якщо ви працюєте з інтерфейсним фреймворком, таким як Bootstrap.

Чесно кажучи, я ніколи не використовував цю техніку на кнопках. Але я робив це на divs досить часто ...

Завдяки відповіді Веса Віндера та її розширенню, включаючи параметри маршруту:

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

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

Зараз днів (VueJS> = 2.x) ви б зробили:

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

Починаючи з Vue-Router 3.1.0, ідеальним способом є використання слотів 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');
        }
    }
}

Я працюю над Vue CLI 2, і цей працює для мене!

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

Приклад використання bootstrap-vue та створення посилання з ідентифікатором всередині рядка таблиці:

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

Де fieldsі items- назви стовпців та вміст таблиці відповідно.