Vuejs: เหตุการณ์เกี่ยวกับการเปลี่ยนเส้นทาง


134

ในหน้าหลักของฉันฉันมีดรอปดาวน์ที่แสดงv-show=showโดยคลิกที่ลิงค์@click = "show=!show"และฉันต้องการตั้งค่าshow=falseเมื่อฉันเปลี่ยนเส้นทาง โปรดแนะนำฉันว่าจะตระหนักถึงสิ่งนี้ได้อย่างไร

คำตอบ:


267

การติดตั้งเฝ้าดูใน$routeองค์ประกอบของคุณเช่นนี้:

watch:{
    $route (to, from){
        this.show = false;
    }
} 

สิ่งนี้สังเกตการเปลี่ยนแปลงเส้นทางและเมื่อมีการเปลี่ยนแปลงตั้งค่าshowเป็นเท็จ


11
และใช้ใน$route: function(to, from) {กรณีที่คุณต้องการรองรับเบราว์เซอร์รุ่นเก่าและไม่ได้ใช้ babel
Paul LeBeau

แต่ฉันจะตอบสนองทันทีเพื่อกำหนดเส้นทางพารามิเตอร์หรือพารามิเตอร์การสืบค้นได้อย่างไรหากคอมโพเนนต์ได้รับการสร้างอินสแตนซ์ / เริ่มต้นในตอนแรก ฉันจะทำในส่วนสร้าง () หรือเมาท์ () หรือ beforeRouteUpdate lifecycle hook หรือที่ไหน
user2774480

38

หากคุณกำลังใช้ v2.2.0 จะมีอีกหนึ่งทางเลือกในการตรวจจับการเปลี่ยนแปลงในเส้นทาง $

ในการตอบสนองต่อการเปลี่ยนแปลงพารามิเตอร์ในส่วนประกอบเดียวกันคุณสามารถดูวัตถุ $ route:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

หรือใช้ตัวป้องกัน beforeRouteUpdate ที่แนะนำใน 2.2:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

อ้างอิง: https://router.vuejs.org/en/essentials/dynamic-matching.html


6
หมายเหตุ: ใช้beforeRouteUpdateงานได้เฉพาะในมุมมองที่ประกาศวิธีการและไม่ใช้กับองค์ประกอบย่อยใด ๆ
JeanValjean

30

ในกรณีที่ใครกำลังมองหาวิธีทำใน typescript นี่คือวิธีแก้ปัญหา

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: Route) {
      // Some action
    }

และใช่ตามที่ @Coops กล่าวไว้ด้านล่างโปรดอย่าลืมใส่

import { Watch } from 'vue-property-decorator';

แก้ไข: Alcalyn สร้างจุดที่ดีมากในการใช้ประเภทเส้นทางแทนที่จะใช้ใด ๆ

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

1
อย่าลืมที่จะรวมในการนำเข้า: import { Prop, Watch } from "vue-property-decorator";
Coops

1
ในที่สุดฉันก็ใช้เวลาหลายชั่วโมงกว่าจะรู้ว่ามีเอกสารอะไรบ้าง?
Ayyash

1
เอกสารที่คล้ายกันฉันสามารถหาได้: router.vuejs.org/api/#the-route-objectนอกจากนี้anyคุณอาจต้องการใช้อินเทอร์เฟซRouteจากimport { Route } from 'vue-router';
Alcalyn

3

การตอบสนองข้างต้นดีกว่า แต่เพื่อความสมบูรณ์เมื่อคุณอยู่ในส่วนประกอบคุณสามารถเข้าถึงวัตถุประวัติภายใน VueRouter ด้วย: this. $ router.history นั่นหมายความว่าเราสามารถรับฟังการเปลี่ยนแปลงด้วย:

this.$router.listen((newLocation) =>{console.log(newLocation);})

ฉันคิดว่าสิ่งนี้มีประโยชน์เป็นหลักเมื่อใช้ร่วมกับสิ่งนี้ $ router.currentRoute.path คุณสามารถตรวจสอบสิ่งที่ฉันกำลังพูดถึงเกี่ยวกับการวาง debugger

คำแนะนำในโค้ดของคุณและเริ่มเล่นกับ Chrome DevTools Console


3

Watcher ที่มีตัวเลือกลึกไม่ได้ผลสำหรับฉัน

แต่ฉันใช้updated () lifecycle hook ซึ่งจะดำเนินการทุกครั้งที่ข้อมูลของส่วนประกอบเปลี่ยนแปลง เพียงแค่ใช้มันเหมือนที่คุณทำกับติด ()

mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}

สำหรับการอ้างอิงของคุณไปที่เอกสาร


0

อีกวิธีหนึ่งสำหรับผู้ใช้ typescript:

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.