Bisakah saya memperpanjang tautan router?

Dengan Vue.JS, apakah mungkin untuk memperluas tautan router, atau mengikat suatu peristiwa ke dalamnya, sehingga untuk jenis tautan tertentu terjadi tindakan lain?

Apa yang ingin saya lakukan adalah menentukan beberapa tautan di aplikasi saya ke tab pop, sementara yang lain tidak; misalnya

<router-link>no tab</router-link>
<router-link-tab>router view is updated and a tab is pushed</router-link-tab>

Saya ingin menghindari pengikatan suatu peristiwa ke beforeRoute dan memeriksa url rute, tetapi saya menghargai bahwa ini mungkin satu-satunya cara untuk maju.

Ini harus berfungsi di seluruh aplikasi Vue, seperti halnya router-link, dan tidak akan terkandung dalam satu komponen saja.

Apakah saya melakukan hal ini secara terbalik? Apakah akan ada kesulitan dalam menentukan komponen khusus yang memicu tab baru dan disebut router.push, seperti ini? Menggunakan RouterLink hanya untuk menyorot aktif dll?

Vue.component('router-link-tab', {
  template: `<router-link :to="to" @click.prevent="click">
               <slot></slot>
             </router-link>
  `,
  props: {
    to: [String, Object],
  },
  methods:{
    click: function () {
        console.log(this.to);
        this.$router.push(to);
    }
  }
});

vue.js vuejs2
person Kurucu    schedule 20.02.2018    source sumber
comment
Kemungkinan duplikat Tambahkan pendengar acara ke ‹ komponen router-link› menggunakan direktif v-on: - VueJS   -  person stdob--    schedule 21.02.2018
comment
Mirip, tapi menurutku tidak sama. Di mana event handler inline didefinisikan? Tautan router saya tidak semuanya berada dalam komponen yang sama.   -  person Kurucu    schedule 21.02.2018
comment
@stdob-- alasan kedua mengapa ini bukan duplikat, adalah karena pertanyaan sebelumnya membahas satu atau beberapa kegunaan penambahan pendengar acara. Saya ingin ini bersifat global; untuk didefinisikan sekali untuk semua penggunaan.   -  person Kurucu    schedule 23.02.2018

Jawaban (1)


arrow_upward
2
arrow_downward

Anda dapat menggunakan komponen khusus:

Vue.component('router-link-tab', {
  template: `<router-link :to="to" event="" @click.native.prevent="click">
               <slot></slot>
             </router-link>
  `,
  props: {
    to: String,
  },
  methods:{
    click: function () {
        console.log(this.to)
    }
  }
});

[ https://jsfiddle.net/6dn8f1nw/ ]

person stdob--    schedule 20.02.2018
comment
Tampaknya ini tidak berfungsi di Sandbox untuk saya (setidaknya tidak di Safari). Peristiwa click hanya didengar oleh komponen router-link-tab dan bukan router-link; jadi /tab tidak pernah dikunjungi (walaupun log konsol klik menyala). - person Kurucu; 23.02.2018