vue监听路由变化

获取route

第一种

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

第二种

watch: {
  '$route':'routeChange'
},
methods: {
  routeChange(){
    console.log(this.$route);
  }
}

第三种

watch: {
      // 在值发生变化之后，重新加载数据
      $route: {
      // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
        handler(newValue, oldValue) {
          console.log(newValue)
        },
         // 深度观察监听
            deep: true,
        // 配置立即执行属性
        immediate: true
      }
    }

获取route.path

watch: {
      // 在值发生变化之后，重新加载数据
      "$route.path": {
      // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
        handler(newValue, oldValue) {
          console.log(newValue)
        },
         // 深度观察监听
            deep: true,
        // 配置立即执行属性
        immediate: true
      }
    }

获取route.name

watch: {
      // 在值发生变化之后，重新加载数据
      "$route.name": { //
      // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
        handler(newValue, oldValue) {
          console.log(newValue)
        },
         // 深度观察监听
            deep: true,
        // 配置立即执行属性
        immediate: true
      }
    }