ฉันสามารถขยายเราเตอร์ลิงค์ได้หรือไม่

ด้วย Vue.JS เป็นไปได้ไหมที่จะขยายเราเตอร์ลิงค์หรือผูกเหตุการณ์เข้ากับลิงค์นั้น โดยที่ลิงค์ประเภทใดประเภทหนึ่งจะมีการดำเนินการอื่นเกิดขึ้นอีกหรือไม่

สิ่งที่ฉันต้องการทำคือระบุลิงก์บางลิงก์ในแอปพลิเคชันของฉันไปที่แท็บป๊อปอัป ในขณะที่ลิงก์อื่นไม่ระบุ เช่น.

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

ฉันต้องการหลีกเลี่ยงการผูกเหตุการณ์กับ beforeRoute และตรวจสอบ URL เส้นทาง แต่ขอขอบคุณที่นี่อาจเป็นวิธีเดียวที่จะไปข้างหน้า

สิ่งนี้จำเป็นต้องทำงานในแอป Vue เช่นเดียวกับที่เราเตอร์ลิงก์ทำ และจะไม่อยู่ในองค์ประกอบเดียวเท่านั้น

ฉันจะถอยหลังขนาดนี้เลยเหรอ? จะมีข้อผิดพลาดในการกำหนดองค์ประกอบที่กำหนดเองที่เรียกใช้แท็บใหม่และเรียกว่า router.push เช่นนี้หรือไม่ ใช้ RouterLink เพื่อเน้นการใช้งานเท่านั้น ฯลฯ

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 แหล่งที่มา
comment
อาจซ้ำกันของ เพิ่มตัวฟังเหตุการณ์ไปที่ ‹ ส่วนประกอบเราเตอร์ลิงค์› โดยใช้ v-on: คำสั่ง - VueJS   -  person stdob--    schedule 21.02.2018
comment
คล้ายกันแต่ไม่คิดว่าจะเหมือนกัน ตัวจัดการเหตุการณ์อินไลน์ถูกกำหนดไว้ที่ใด ลิงค์เราเตอร์ของฉันไม่ได้อยู่ในองค์ประกอบเดียวกันทั้งหมด   -  person Kurucu    schedule 21.02.2018
comment
@stdob-- เหตุผลที่สองที่นี่ไม่ใช่สิ่งที่ซ้ำกันก็คือคำถามก่อนหน้านี้พิจารณาถึงการใช้การเพิ่มผู้ฟังเหตุการณ์เพียงครั้งเดียวหรือสองสามครั้ง ฉันอยากให้เรื่องนี้เป็นสากล ที่จะกำหนดครั้งเดียวสำหรับการใช้งานทั้งหมด   -  person Kurucu    schedule 23.02.2018

คำตอบ (1)


arrow_upward
2
arrow_downward

คุณสามารถใช้องค์ประกอบที่กำหนดเอง:

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
สิ่งนี้ดูเหมือนจะใช้ไม่ได้ใน Sandbox สำหรับฉัน (อย่างน้อยก็ไม่ใช่ใน Safari) เหตุการณ์การคลิกจะได้ยินโดยส่วนประกอบของแท็บเราเตอร์ลิงค์เท่านั้น ไม่ใช่เราเตอร์ลิงค์ ดังนั้น /tab ไม่เคยถูกเยี่ยมชม (แม้ว่าบันทึกคอนโซลการคลิกจะเริ่มทำงานก็ตาม) - person Kurucu; 23.02.2018