ในหน้าหลักของฉันฉันมีดรอปดาวน์ที่แสดงv-show=show
โดยคลิกที่ลิงค์@click = "show=!show"
และฉันต้องการตั้งค่าshow=false
เมื่อฉันเปลี่ยนเส้นทาง โปรดแนะนำฉันว่าจะตระหนักถึงสิ่งนี้ได้อย่างไร
ในหน้าหลักของฉันฉันมีดรอปดาวน์ที่แสดงv-show=show
โดยคลิกที่ลิงค์@click = "show=!show"
และฉันต้องการตั้งค่าshow=false
เมื่อฉันเปลี่ยนเส้นทาง โปรดแนะนำฉันว่าจะตระหนักถึงสิ่งนี้ได้อย่างไร
คำตอบ:
การติดตั้งเฝ้าดูใน$route
องค์ประกอบของคุณเช่นนี้:
watch:{
$route (to, from){
this.show = false;
}
}
สิ่งนี้สังเกตการเปลี่ยนแปลงเส้นทางและเมื่อมีการเปลี่ยนแปลงตั้งค่าshow
เป็นเท็จ
หากคุณกำลังใช้ 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
beforeRouteUpdate
งานได้เฉพาะในมุมมองที่ประกาศวิธีการและไม่ใช้กับองค์ประกอบย่อยใด ๆ
ในกรณีที่ใครกำลังมองหาวิธีทำใน 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';
import { Prop, Watch } from "vue-property-decorator";
any
คุณอาจต้องการใช้อินเทอร์เฟซRoute
จากimport { Route } from 'vue-router';
การตอบสนองข้างต้นดีกว่า แต่เพื่อความสมบูรณ์เมื่อคุณอยู่ในส่วนประกอบคุณสามารถเข้าถึงวัตถุประวัติภายใน VueRouter ด้วย: this. $ router.history นั่นหมายความว่าเราสามารถรับฟังการเปลี่ยนแปลงด้วย:
this.$router.listen((newLocation) =>{console.log(newLocation);})
ฉันคิดว่าสิ่งนี้มีประโยชน์เป็นหลักเมื่อใช้ร่วมกับสิ่งนี้ $ router.currentRoute.path คุณสามารถตรวจสอบสิ่งที่ฉันกำลังพูดถึงเกี่ยวกับการวาง debugger
คำแนะนำในโค้ดของคุณและเริ่มเล่นกับ Chrome DevTools Console
Watcher ที่มีตัวเลือกลึกไม่ได้ผลสำหรับฉัน
แต่ฉันใช้updated () lifecycle hook ซึ่งจะดำเนินการทุกครั้งที่ข้อมูลของส่วนประกอบเปลี่ยนแปลง เพียงแค่ใช้มันเหมือนที่คุณทำกับติด ()
mounted() {
/* to be executed when mounted */
},
updated() {
console.log(this.$route)
}
อีกวิธีหนึ่งสำหรับผู้ใช้ 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 {}
$route: function(to, from) {
กรณีที่คุณต้องการรองรับเบราว์เซอร์รุ่นเก่าและไม่ได้ใช้ babel