vue3中监听路由，离开页面时停止监听

在 Vue3 中，监听路由变化并实现在离开页面时停止监听通常是在组件的生命周期钩子 `beforeDestroy` 或者在全局通过 `vue-router` 提供的 `router.afterEach` 钩子函数中完成的。这里是一个简单的示例：

1. **在组件内部**：

export default {
  beforeDestroy() {
    // 取消订阅路由改变事件
    this.$router.app.$once('routeChangeSuccess', () => {
      // 这里取消监听
      // 如果你使用的是vue-router提供的导航守卫，可以在这里移除对应的守卫
      this.$router.app.$off('routeChangeSuccess', this.unlisten);
    });
  },
  methods: {
    unlisten() {
      // 当需要停止监听时执行的方法
    }
  }
}

2. **在全局使用 `afterEach`**：

import router from '@/router';

router.afterEach((to, from, next) => {
  // 如果当前路由已经离开了组件所在的路径，停止监听
  if (from.fullPath !== to.fullPath) {
    router.app.$off('routeChangeSuccess', yourCallbackFunction); // 替换为实际的回调函数名
  }

  next();
});

在这个例子中，你需要确保有一个全局注册的回调函数（如 `yourCallbackFunction`），它会在每次路由改变成功后执行，然后在离开当前页面时被移除。