Vue 路由守卫关闭监听：区分切换标签和关闭页面

你可以使用beforeRouteLeave路由守卫来关闭监听。在关闭页面之前，通过判断是否是切换标签还是关闭标签来决定是否关闭监听。\n\n示例代码如下：\n\njavascript\nimport { watch } from 'vue'\n\nconst routeLeaveGuard = (to, from, next) => {\n // 判断是否是关闭标签\n if (to.name === null && from.name !== null) {\n // 关闭监听\n unwatch()\n }\n next()\n}\n\nexport default {\n beforeRouteLeave: routeLeaveGuard,\n created() {\n const unwatch = watch(\n () => router.currentRoute.value.query.id,\n () => {\n state.queryForm = {\n pageNo: 1,\n pageSize: 10,\n sName: '',\n hangYeLeiBeiID: undefined,\n xingZhengQuHuaID: [],\n gaoJingLeiBei: undefined,\n jianCeDianLeiXing: undefined,\n }\n }\n )\n },\n}\n\n\n在上述代码中，我们定义了一个routeLeaveGuard函数，它作为beforeRouteLeave路由守卫的处理函数。在函数中，我们通过判断to.name和from.name来确定是否是关闭标签。如果是关闭标签，则调用unwatch()函数关闭监听。\n\n在created生命周期钩子中，我们创建了一个监听，并将返回的取消监听函数保存在unwatch变量中。这样，在路由切换时，routeLeaveGuard函数中就可以使用unwatch函数来关闭监听。\n\n请根据你的实际情况进行适当的修改。