vue.js가 라우팅 변경을 모니터링하는 방법

Vue.js 경로 변경 모니터링 방법: 1. watch를 통해 구현된 코드는 [watch:{$route(to,from){console.log(to.path);}]입니다. 2. 키는 다음과 같이 사용됩니다. "재사용"의 경우 코드는 [

이 튜토리얼의 운영 환경: windows10 시스템, vue2.9, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 글: vue.js】

vue.js 라우팅 변경 모니터링 방법:

방법 1: watch를 통해

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},

르르레

또는

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

방법 2: "재사용"을 방지하기 위해 키가 사용됩니다

Vue는 "이 두 요소는 완전히 독립적입니다. 재사용하지 마세요"라고 선언하는 방법을 제공합니다. 고유한 값(Vue 문서의 원래 단어)이 있는 키 속성을 추가하기만 하면 됩니다.

// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}

계산된 속성을 사용하면 Date() 키가 매번 달라지므로 원하는 대로 데이터를 새로 고칠 수 있습니다.

방법 3: vue-router의 후크 기능을 통해 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

<router-view :key="key"></router-view>
 
computed: {
  key() {
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

관련 무료 학습 권장 사항: JavaScript(동영상)

위 내용은 vue.js가 라우팅 변경을 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!