Узнайте, как легко использовать кнопку в качестве ссылки в Vue.js, будь то обычная ссылка или ссылка Vue Router.
Чтобы использовать кнопку в качестве ссылки в Vue, вы можете поместить кнопку в элемент привязки (<a>
). При нажатии кнопки ссылки браузер переходит к указанному URL-адресу.
<template>
<div>
<a href="/posts">
<button>Posts</button>
</a>
</div>
</template>
Используйте кнопку в качестве ссылки на Vue Router
При работе с Vue Router вы можете сделать так, чтобы кнопка служила ссылкой на маршрутизатор, используя функцию navigate
, предоставляемую слотом по умолчанию router-link
.
<template>
<div>
<router-link
to="/posts"
custom
v-slot="{ navigate }"
>
<button
@click="navigate"
role="link"
>
Posts
</button>
</router-link>
</div>
</template>
Мы используем navigate
как обработчик события click
; он вызывается при нажатии кнопки, заставляя браузер перейти к указанному маршруту без обновления страницы.
Вышеупомянутый метод работает только для Vue 3.x. Если вы работаете с Vue 2.x, вы можете использовать кнопку в качестве ссылки на маршрутизатор, установив свойство tag
на имя компонента кнопки, а свойство to
на конкретный маршрут.
<template>
<div>
<router-link to="/posts" tag="button">Posts</router-link>
</div>
</template>
Метод $router.push()
В качестве альтернативы мы можем использовать кнопку в качестве ссылки на Vue Router, вызвав метод push()
для переменной $router
, предоставленной Vue Router.
<template>
<div>
<button @click="$router.push('/posts')">Posts</button>
</div>
</template>
Переменная $router
представляет экземпляр маршрутизатора и может использоваться для программной навигации.
Используйте кнопку Vuetify в качестве ссылки
При работе с фреймворком Vuetify мы можем использовать кнопочный компонент в качестве ссылки, установив свойство v-btn
href
.
<template>
<div>
<v-btn
href="/posts"
color="primary"
dark
>
Posts
</v-btn>
</div>
</template>
Используйте кнопку Vuetify в качестве ссылки на Vue Router
При использовании Vue Router с Vuetify мы можем использовать компонент кнопки в качестве ссылки на маршрутизатор, установив свойство v-btn to
.
<template>
<div>
<v-btn
to="/posts"
color="primary"
dark
>
Posts
</v-btn>
</div>
</template>
Используйте кнопку BootstrapVue в качестве ссылки
Если вы работаете с платформой BootstrapVue, вы можете использовать href
, чтобы превратить компонент кнопки в ссылку.
<template>
<div>
<b-button
href="/posts"
variant="primary"
>
Posts
</b-button>
</div>
</template>
Используйте кнопку BootstrapVue в качестве ссылки на Vue Router
Мы можем установить свойство b-button
to
для использования компонента кнопки BootstrapVue в качестве ссылки Vue Router.
<template>
<div>
<b-button
to="/posts"
variant="success"
>
Posts
</b-button>
</div>
</template>
Первоначально опубликовано на codingbeautydev.com
11 удивительных новых функций JavaScript в ES13
Это руководство познакомит вас со всеми последними функциями, добавленными в ECMAScript 13. Эти мощные новые функции модернизируют ваш JavaScript с помощью более короткого и выразительного кода.
Зарегистрируйтесь и немедленно получите бесплатную копию.