为什么点击路由跳转的时候 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) {
    // 执行加载操作
  }
}