Vue2路由跳转不被 watch $route监听到的方法

在Vue2中，$route是一个响应式对象，当路由发生变化时，会自动更新。但是如果你想监听$route的变化，可能会遇到一些问题。

这是因为$route是一个响应式对象，而watch默认只监听对象的第一层属性。如果你想监听$route的变化，可以使用深度监听（deep）或手动监听$route的变化。

1. 使用深度监听：

watch: {
  '$route': {
    handler: function(newVal, oldVal) {
      // do something
    },
    deep: true
  }
}

2. 手动监听$route的变化：

mounted() {
  this.unwatch = this.$router.afterEach((to, from) => {
    // do something
  })
},
beforeDestroy() {
  this.unwatch()
}

在mounted钩子中，我们使用$router.afterEach()方法来监听路由的变化，并将返回的函数赋值给实例的unwatch属性。在beforeDestroy钩子中，我们调用unwatch方法来取消监听。

这样就可以监听到路由的变化了。

相关问题

vue跳转到缓存页面使用watch监听路由

在Vue应用中，如果你想在路由变化时自动跳转到之前访问过的缓存页面，可以使用`vue-router`提供的`beforeEach`钩子结合`watch`来监听路由变化，并检查是否存在缓存页面。以下是基本的步骤：

1. 安装并引入`vue-router`：

   npm install vue-router

2. 在Vue实例的配置文件中设置路由：

   import Vue from 'vue';
   import Router from 'vue-router';

   const router = new Router({
     // ...路由配置...
   });

   // 确保在主组件中挂载router
   new Vue({
     router,
     // ...
   }).$mount('#app');

3. 创建一个全局的`watch`监听路由变化：

   export default {
     watch: {
       $route(to, from) {
         if (from.name && !to.meta.preventCache) { // 检查是否从非阻止缓存的页面返回
           const cachedPage = localStorage.getItem(from.name); // 从本地存储获取缓存页面数据
           if (cachedPage) { // 如果有缓存数据
             // 解析缓存数据并跳转到对应页面
             router.replace({ name: from.name, params: JSON.parse(cachedPage).params });
           }
         }
       },
     },
     // ...
   };

这里假设你已经在每个页面设置了一个名字（比如`'/page/:id'`对应的名称是`'page'`），并且将需要缓存的数据序列化并存在了本地存储。

4. 当需要防止某个页面被缓存时，在路由配置中添加`meta`字段：

   {
     path: '/your-page',
     name: 'your-page',
     component: YourComponent,
     meta: { preventCache: true } // 阻止当前页面被缓存
   }

为什么点击路由跳转的时候 this.$watch( "$route", (to, from) => {加载了两次

当你在Vue应用中监听`$route`变化（通过`this.$watch("$route", ...)`），并在路由切换时执行某些操作时，有时会发现加载被执行了两次的原因可能是：

1. **默认行为**：`$route`是Vue Router内置的响应式对象，初次进入页面或路由改变时，`$route`都会触发一次变更，因此监听器会被初始化并执行回调。这是第一次加载。

2. **事件触发**：当路由实际发生变化时，如点击导航链接或使用`router.push`等API，`$route`再次改变，这会触发第二次`$watch`回调。

为了避免这种情况，你可以考虑以下策略：

- **延迟初始化**：可以在`mounted`生命周期钩子里开始监听，而不是在`created`阶段，让初始的监听跳过。

- **优化条件判断**：在回调函数内检查是否真的发生了路由的实际更改，例如检查`from.path !== to.path`，只在路径改变时执行加载操作。

- **解绑监听**：在不需要继续监听路由变化的地方，记得清除监听器，如在组件卸载或`beforeDestroy`生命周期中调用`unwatch()`。

// 创建时
setup() {
  watch('$route', onRouteChange, { immediate: true });
}

// 卸载时
beforeDestroy() {
  unwatch('$route', onRouteChange);
}

function onRouteChange(to, from) {
  if (from.path !== to.path) {
    // 执行加载操作
  }
}