【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

在Vue中，监控路由变化并在需要时刷新当前页面的数据，可以通过以下几种方法实现：

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

export default {
  watch: {
    '$route': {
      handler: 'fetchData',
      immediate: true
    }
  },
  methods: {
    fetchData() {
      // 根据路由参数获取数据的逻辑
    }
  }
}

2. 使用beforeRouteUpdate导航守卫：

export default {
  beforeRouteUpdate(to, from, next) {
    this.fetchData(to.params);
    next();
  },
  methods: {
    fetchData(params) {
      // 根据路由参数获取数据的逻辑
    }
  }
}

3. 使用activated和deactivated生命周期钩子（对于<keep-alive>缓存的组件）：

export default {
  activated() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 根据路由参数获取数据的逻辑
    }
  }
}

选择哪种方法取决于你的应用需求和具体实现。通常情况下，beforeRouteUpdate适合于使用vue-router的多个视图组件，而watch'$route'适合于单个视图组件或者不使用vue-router的复杂场景。如果你的组件被<keep-alive>缓存起来，那么activated\`钩子是一个更好的选择。