Vuejs: Sự kiện thay đổi tuyến đường

Trong trang chính của tôi, tôi có các danh sách hiển thị v-show=showbằng cách nhấp vào liên kết @click = "show=!show"và tôi muốn đặt show=falsekhi tôi thay đổi tuyến đường. Tư vấn cho tôi làm thế nào để nhận ra điều này.

Thiết lập trình theo dõi trên $routethành phần của bạn như thế này:

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

Điều này quan sát sự thay đổi tuyến đường và khi thay đổi, đặt showthành sai

Nếu bạn đang sử dụng v2.2.0 thì có thêm một tùy chọn có sẵn để phát hiện các thay đổi trong $ tuyến.

Để phản ứng với các thay đổi params trong cùng một thành phần, bạn chỉ cần xem đối tượng $ route:

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

Hoặc, sử dụng bộ bảo vệ beforeRouteUpdate được giới thiệu trong 2.2:

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

Tham khảo: https://router.vuejs.org/en/essentials/dynamic-matching.html

Chỉ cần kích hoạt nếu bất cứ ai đang tìm kiếm làm thế nào để làm điều đó trong bản in ở đây là giải pháp

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

Và có như được đề cập bởi @Coops bên dưới, xin đừng quên bao gồm

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

Chỉnh sửa: Alcalyn đã thực hiện một điểm rất tốt khi sử dụng loại Tuyến đường thay vì sử dụng bất kỳ

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

Các phản hồi trên là tốt hơn, nhưng chỉ để hoàn thiện, khi bạn ở trong một thành phần, bạn có thể truy cập đối tượng lịch sử bên trong VueRouter với: this. $ Router.history. Điều đó có nghĩa là chúng ta có thể lắng nghe những thay đổi với:

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

Tôi nghĩ rằng điều này chủ yếu hữu ích khi được sử dụng cùng với điều này. $ Router.cienRoute.path Bạn có thể kiểm tra những gì tôi đang nói về việc đặt một debugger

hướng dẫn trong mã của bạn và bắt đầu chơi với Bảng điều khiển DevTools của Chrome.

Watcher với tùy chọn sâu không làm việc cho tôi.

Thay vào đó, tôi sử dụng hook vòng đời cập nhật () được thực thi mỗi khi dữ liệu của thành phần thay đổi. Chỉ cần sử dụng nó như bạn làm với mount () .

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

Để bạn tham khảo, hãy truy cập tài liệu .

Một giải pháp khác cho người dùng bản thảo:

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 {}