Включение тега router-link в кнопку в vuejs

Включение тега router-link в кнопку в vuejs

11.08.2017 05:58:58 Просмотров 53 Источник

Можно ли обернуть или вложить router-linkв тег button?

Когда я нажимаю кнопку, Я хочу, чтобы она направила меня на нужную страницу.

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs#comment104412856_45638239
Для ответов в 2019 году и vue Router 3.1.0+ прокрутите вниз для получения последних ответов stackoverflow.com/a/58495529/90674

Ответы - Включение тега router-link в кнопку в vuejs / Enclosing a router-link tag in a button in vuejs

Является ответом!
choasia

11.08.2017 06:07:09

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

<router-link to="/foo" tag="button">foo</router-link>
https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/45638390#comment99271083_45638390
А что, если эта кнопка принимает какие-то реквизиты? Как же их раздать?
https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/45638390#comment103320942_45638390
@andcl у меня был тот же вопрос, я опубликовал ответ ниже, который мне сказала команда Vue-Router на GitHub здесь: github.com/vuejs/vue-router/issues/3003
https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/45638390#comment103838116_45638390
я пытался сделать это почти через год после того, как уже сделал! akkk еще раз спасибо
Badacadabra

11.08.2017 06:27:44

@choasia's answer is correct.

Кроме того, вы можете обернуть buttonrouter-link, например:

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

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

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

https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/45638775#comment96074443_45638775
Дополнительно можно указать тег="пролет" внутри <router-link> так это не применять <a> стили, которые дает даже лучший контроль на Выглядит: <router-link to="/foo" tag="span"> <Button> Текст Кнопки </Button> </router-link>
https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/45638775#comment100732689_45638775
Но слова в кнопке (например, " вперед!"в вашем примере) будет иметь синее подчеркивание, которое не является красивым...
https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/45638775#comment102439525_45638775
Даже с такими фреймворками, как Bootstrap, это вряд ли когда-нибудь понадобится, потому что вы можете включить стандартные атрибуты, такие как class, прямо в тег router-link, и они будут применены к визуализируемому элементу, даже кнопке, когда вы используете tag= "button": ..">></router-link>
Anuga

03.05.2018 09:26:26

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

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

02.12.2018 09:33:36

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

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

12.12.2018 10:01:42

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

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

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

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

https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/53749696#comment97506166_53749696
Да, спасибо! Это было самое простое и работало отлично. И я мог бы стилизовать свою пуговицу, как бы я ни выбрал. Если вам нужно использовать params, вы также можете сделать что-то вроде этого: поштовх({имя: 'о', параметры: { идентификатор: $маршрут.параметры.идентификатор },})">Нажмите для навигации</button>
Joe Who

28.03.2019 11:30:07

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

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

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

Jeff Hykin

22.10.2019 03:05:18

Начиная с версии Vue 3.1.0, идеальным способом является использование slots 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>
https://stackoverflow.com/questions/45638239/enclosing-a-router-link-tag-in-a-button-in-vuejs/58495529#comment104413028_58495529
Если вы не находитесь на версии >= 3.1.0, элемент в слоте будет молча игнорироваться без каких-либо ошибок отображения. Ссылка на документы: router.vuejs.org/api/#v-slot-api-3-1-0
Kaushik shrimali

06.01.2020 11:08:28

Методы маршрутизации с использованием метода, а также маршрутизации 1. Соединение маршрутизатора

<router-link to="/login">Login </router-link>

  1. При нажатии на кнопку этого типа вызовите другой маршрут.
<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');
        }
    }
}
Закрыть X