Узнайте, как легко использовать кнопку в качестве ссылки в 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 с помощью более короткого и выразительного кода.

Зарегистрируйтесь и немедленно получите бесплатную копию.