Vuejs में एक बटन में एक राउटर-लिंक टैग संलग्न करना

Question 1

क्या मैं किसी router-linkटैग में टैग लपेट सकता हूं या संलग्न कर सकता हूं button?

जब मैं बटन दबाता हूं, मैं चाहता हूं कि वह मुझे वांछित पृष्ठ पर ले जाए।

Question 2

आप tagप्रोप का उपयोग कर सकते हैं ।

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

Question 3

जबकि यहाँ पर उत्तर सभी अच्छे हैं, कोई भी सबसे आसान समाधान नहीं है। कुछ त्वरित शोध के बाद, ऐसा लगता है कि बटन का उपयोग करने का वास्तविक सबसे आसान तरीका router.pushकॉल के साथ वाउ-राउटर है । इसे इस तरह से .vue टेम्पलेट में उपयोग किया जा सकता है:

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

सुपर सरल और साफ। मुझे आशा है कि किसी और को यह उपयोगी लगता है!

स्रोत: https://router.vuejs.org/guide/essentials/navigation.html

Question 4

@ इकोसिया का जवाब सही है।

वैकल्पिक रूप से, आप buttonटैग को टैग में लपेट सकते हैं router-linkजैसे:

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

यह इतना साफ नहीं है क्योंकि आपका बटन एक लिंक तत्व ( <a>) के अंदर होगा । हालाँकि, लाभ यह है कि आपके बटन पर आपका पूर्ण नियंत्रण होता है, जो बूटस्ट्रैप जैसे फ्रंट-एंड फ्रेमवर्क के साथ काम करने पर आवश्यक हो सकता है।

मैंने इस तकनीक का उपयोग कभी भी बटन पर नहीं किया, ईमानदार होने के लिए। लेकिन मैंने बहुत बार divs पर ऐसा किया है ...

Question 5

वेस विंडर के जवाब के लिए धन्यवाद, और इसे मार्ग परियों को शामिल करने के लिए विस्तारित किया गया:

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

और जो स्रोत वेस प्रदान करता है उसे दोहरा रहा है: https://router.vuejs.org/guide/essentials/navis.html

Question 6

अब दिन (VueJS> = 2.x) आप क्या करेंगे:

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

Question 7

वीयू-राउटर 3.1.0 के रूप में, आदर्श तरीका है स्लॉट एपीआई का उपयोग करना।
यहाँ प्रलेखन

@ choasia के उत्तर के लिए सहारा को घटक को पारित करने की अनुमति नहीं है
@ Badacadabra के उत्तर में पुस्तकालय-बटन (जैसे बटन मार्जिन) के साथ समस्याएं होती हैं

यहां बताया गया है कि समाधान एपीआई के साथ कैसे काम करेगा

<router-link
  to="/about"
  v-slot="{href, route, navigate}"
  >
    <button :href="href" @click="navigate" class='whatever-you-want'>
      {{ route.name }}
    </button>
</router-link>

Question 8

रूटिंग विधि के साथ-साथ रूटिंग विधि का उपयोग करना 1. राउटर लिंक

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

जब उस बटन पर क्लिक करें जो दूसरे मार्ग को कॉल करता है।

<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');
        }
    }
}

Question 9

मैं Vue CLI 2 पर काम कर रहा हूं और इसने मेरे लिए काम किया है!

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

Question 10

    // literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

Question 11

बूटस्ट्रैप-व्यू का उपयोग करके और तालिका पंक्ति के अंदर आईडी के साथ लिंक बनाने का एक उदाहरण:

<b-table :fields="fields" :items="items">
    <template v-slot:cell(action)="data">
        <router-link :to="`/rounds/${data.item.id}`" v-slot="{ href, route, navigate}">
            <b-button :href="href" @click="navigate" color="primary" style="text">{{ data.item.id }}</b-button>
        </router-link>
    </template>
</b-table>

स्तंभ नाम और तालिका सामग्री क्रमशः कहां fieldsऔर कहां itemsहैं।