fix(guards): deactivate leave and update guards

Author: posva

e2e/guards-instances/index.ts

@@ -141,6 +141,7 @@ leaves: {{ state.leave }}
         <li><router-link to="/f/2">/f/2</router-link></li>
         <li><router-link to="/f/2?bar=foo">/f/2?bar=foo</router-link></li>
         <li><router-link to="/f/2?foo=key">/f/2?foo=key</router-link></li>
+        <li><router-link to="/f/2?foo=key2">/f/2?foo=key2</router-link></li>
       </ul>
 
       <template v-if="testCase === 'keepalive'">

e2e/specs/guards-instances.js

@@ -130,6 +130,15 @@ module.exports = {
       .assert.containsText('.view', 'foo 1')
       .click('li:nth-child(2) a')
       .assert.containsText('.view', 'foo 1')
+      .click('li:nth-child(6) a')
+      .click('#resetLogs')
+      .click('li:nth-child(7) a')
+      .assert.containsText('.view', 'foo 0')
+      .expect.element('#logs')
+      .text.to.equal(
+        ['update /f/2 - /f/2', 'setup:update /f/2 - /f/2'].join('\n')
+      )
+    browser.click('li:nth-child(6) a').assert.containsText('.view', 'foo 0')
 
     browser.end()
   },
@@ -168,6 +177,27 @@ module.exports = {
       .click('li:nth-child(2) a')
       .click('li:nth-child(6) a')
       .assert.containsText('.view', 'foo 2')
+      .click('#resetLogs')
+      .click('li:nth-child(7) a')
+      .assert.containsText('.view', 'foo 0')
+      .expect.element('#logs')
+      // should only trigger active guards
+      .text.to.equal(
+        ['update /f/2 - /f/2', 'setup:update /f/2 - /f/2'].join('\n')
+      )
+    browser
+      .click('li:nth-child(6) a')
+      .assert.containsText('.view', 'foo 2')
+      .expect.element('#logs')
+      .text.to.equal(
+        [
+          'update /f/2 - /f/2',
+          'setup:update /f/2 - /f/2',
+          // we won't see the update guard because the instance is not available
+          // 'update /f/2 - /f/2',
+          'setup:update /f/2 - /f/2',
+        ].join('\n')
+      )
 
     browser.end()
   },

src/navigationGuards.ts

@@ -17,16 +17,24 @@ import {
   NavigationFailure,
   NavigationRedirectError,
 } from './errors'
-import { ComponentOptions, onUnmounted } from 'vue'
+import { ComponentOptions, onUnmounted, onActivated, onDeactivated } from 'vue'
 import { inject, getCurrentInstance, warn } from 'vue'
 import { matchedRouteKey } from './injectionSymbols'
 import { RouteRecordNormalized } from './matcher/types'
 import { isESModule } from './utils'
 
 function registerGuard(list: NavigationGuard[], guard: NavigationGuard) {
-  onUnmounted(() => {
+  const removeFromList = () => {
     const index = list.indexOf(guard)
     if (index > -1) list.splice(index, 1)
+  }
+
+  onUnmounted(removeFromList)
+  onDeactivated(removeFromList)
+
+  onActivated(() => {
+    const index = list.indexOf(guard)
+    if (index < 0) list.push(guard)
   })
 
   list.push(guard)