跳转页面依然触发watch vue2

### Vue2 中页面跳转时不触发 `watch` 的原因分析

在单页应用(SPA)中，当路由发生变化时，默认情况下会触发 `$route` 的监听器。然而，在某些场景下，比如在同一组件内切换不同参数的路由时，可能会遇到 `watch` 不被触发的情况[^1]。

### 解决方案一：利用 `beforeRouteUpdate`

对于 Vue Router 2.x 及以上版本，官方提供了导航守卫来处理这种情况。可以使用 `beforeRouteUpdate` 导航守卫替代传统的 `watch $route` 方式：

export default {
    data() {
        return {};
    },
    methods: {
        fetchData(id) {
            console.log('Fetching new data with id:', id);
        }
    },
    beforeRouteUpdate(to, from, next) {
        this.fetchData(to.params.id); // 当前路由改变但该组件被复用时调用
        next();
    },
    created() {
        this.fetchData(this.$route.params.id);
    }
}

这种方式能够确保即使是在同一个组件内部发生路由变化也能及时更新数据[^3]。

### 解决方案二：强制刷新视图

如果希望更简单粗暴地解决问题，可以通过设置一个唯一的 key 给 `<router-view>` 来实现每次路由变更都重新渲染整个组件的效果：

<template>
  <div id="app">
    <!-- 使用 route.fullPath 作为key -->
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

这种方法虽然有效但也可能导致性能上的损失，因此只适用于特定情况下的临时解决方案[^4]。

### 解决方案三：优化 Watcher 实现

针对不想修改现有逻辑的情况下，也可以尝试改进 watcher 的写法使其更加灵活高效：

export default {
    watch: {
        '$route'(to, from) {
            if (to.path !== from.path || to.query !== from.query || JSON.stringify(to.params) !== JSON.stringify(from.params)) {
                // 执行相应操作...
            }
        }
    }
};

通过增加条件判断，可以让 watcher 更加精准地响应实际发生的路由变动[^2]。