fix: onBeforeRouteLeave not remove (fix #3826)

src/composables/guards.js

@@ -1,4 +1,4 @@
-import { getCurrentInstance, onUnmounted } from 'vue'
+import { getCurrentInstance, onUnmounted, onActivated, onDeactivated } from 'vue'
 import { throwNoCurrentInstance } from './utils'
 import { useRouter } from './globals'
 
@@ -34,6 +34,12 @@ export function onBeforeRouteLeave (guard) {
   return useFilteredGuard(guard, isLeaveNavigation)
 }
 
+function registerGuard (router, guard, fn, depth) {
+  return router.beforeEach((to, from, next) => {
+    return fn(to, from, depth) ? guard(to, from, next) : next()
+  })
+}
+
 const noop = () => {}
 function useFilteredGuard (guard, fn) {
   const instance = getCurrentInstance()
@@ -56,11 +62,17 @@ function useFilteredGuard (guard, fn) {
       : null
 
   if (depth != null) {
-    const removeGuard = router.beforeEach((to, from, next) => {
-      return fn(to, from, depth) ? guard(to, from, next) : next()
+    let removeGuard = registerGuard(router, guard, fn, depth)
+    onUnmounted(removeGuard)
+
+    onActivated(() => {
+      removeGuard = removeGuard || registerGuard(router, guard, fn, depth)
+    })
+    onDeactivated(() => {
+      removeGuard()
+      removeGuard = null // reset removeGuard
     })
 
-    onUnmounted(removeGuard)
     return removeGuard
   }