Можно ли обернуть или заключить тег router-link
в тег button
?
Когда я нажимаю кнопку, я хочу, чтобы она перенаправила меня на нужную страницу.
Можно ли обернуть или заключить тег router-link
в тег button
?
Когда я нажимаю кнопку, я хочу, чтобы она перенаправила меня на нужную страницу.
Вы можете использовать tag
prop.
<router-link to="/foo" tag="button">foo</router-link>
@choasia правильный ответ.
В качестве альтернативы вы можете обернуть тег button
в тег router-link
, например:
<router-link :to="{name: 'myRoute'}">
<button id="myButton" class="foo bar">Go!</button>
</router-link>
Это не так чисто, потому что ваша кнопка будет внутри элемента ссылки (<a>
). Однако преимущество состоит в том, что у вас есть полный контроль над вашей кнопкой, что может потребоваться, если вы работаете с интерфейсной платформой, такой как Bootstrap.
Я никогда не использовал эту технику на пуговицах, если честно. Но я делал это на divs довольно часто...
Хотя все ответы здесь хорошие, ни одно из них не кажется самым простым решением. После небольшого исследования кажется, что самый простой способ заставить кнопку использовать vue-router - это вызов router.push
. Это можно использовать в шаблоне .vue следующим образом:
<button @click="$router.push('about')">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>
Благодаря ответу Уэса Уиндера и расширению его для включения параметров маршрута:
<button @click="$router.push({name: 'about-something', params: { id: 'abc123' },})">Click to Navigate</button>
И повторяя источник, который предоставил Уэс: https://router.vuejs.org/guide/essentials/navigation.html
Я работаю над Vue CLI 2, и этот работает для меня!
<router-link to="/about-creator">
<button>About Creator</button>
</router-link>
Начиная с 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>