Закрытие тега маршрутизатора в кнопке в vuejs

Ответ 1

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

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

Ответ 2

@choasia правильный ответ.

В качестве альтернативы вы можете обернуть тег button в тег router-link, например:

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

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

Начиная с Vue 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>