Vue中监听路由参数变化的几种方式

在Vue中，可以通过watch来监听路由参数的变化。以下是几种常见的方法：

1. 使用watch监听$route对象:

export default {
  watch: {
    '$route.params': {
      immediate: true,
      handler(newVal, oldVal) {
        console.log('路由参数变化了', newVal, oldVal);
      }
    }
  }
}

2. 使用beforeRouteUpdate导航守卫:

export default {
  beforeRouteUpdate(to, from, next) {
    console.log('路由参数变化了', to.params, from.params);
    next();
  }
}

3. 使用watch结合$route对象的路由参数:

export default {
  watch: {
    '$route': function(to, from) {
      if (to.params.yourParamName !== from.params.yourParamName) {
        console.log('路由参数yourParamName变化了', to.params.yourParamName, from.params.yourParamName);
      }
    }
  }
}

以上代码可以在Vue组件中使用，用以监听路由参数的变化。