fix: move addNavGuards check to mounted hook

The addNavGuards check adds the navigation guards when an afterNavigation callback is defined but refreshOnceOnNavigation was not set. As the afterNavigation callback is defined in metaInfo which can be dependent on user data we need to wait until all components are fully mounted before checking if a afterNavigation callback was defined

Fixes: #348

Author: pimlie

src/shared/mixin.js

@@ -76,8 +76,14 @@ export default function createMixin(Vue, options) {
               if (!this.$root._vueMeta.initialized) {
                 // refresh meta in nextTick so all child components have loaded
                 this.$nextTick(function () {
-                  this.$root.$meta().refresh()
+                  const { metaInfo } = this.$root.$meta().refresh()
                   this.$root._vueMeta.initialized = true
+
+                  // add the navigation guards if they havent been added yet
+                  // they are needed for the afterNavigation callback
+                  if (!options.refreshOnceOnNavigation && metaInfo.afterNavigation) {
+                    addNavGuards(this)
+                  }
                 })
               }
             })
@@ -91,16 +97,6 @@ export default function createMixin(Vue, options) {
 
         // do not trigger refresh on the server side
         if (!this.$isServer) {
-          // add the navigation guards if they havent been added yet
-          // if metaInfo is defined as a function, this does call the computed fn redundantly
-          // but as Vue internally caches the results of computed props it shouldnt hurt performance
-          if (!options.refreshOnceOnNavigation && (
-            (this.$options[options.keyName] && this.$options[options.keyName].afterNavigation) ||
-            (this.$options.computed && this.$options.computed.$metaInfo && (this.$options.computed.$metaInfo() || {}).afterNavigation)
-          )) {
-            addNavGuards(this)
-          }
-
           // no need to add this hooks on server side
           updateOnLifecycleHook.forEach((lifecycleHook) => {
             ensuredPush(this.$options, lifecycleHook, () => triggerUpdate(this, lifecycleHook))

test/unit/components.test.js

@@ -128,7 +128,7 @@ describe('client', () => {
     expect(context._uid).toBe(wrapper.vm._uid)
   })
 
-  test('afterNavigation function is called with refreshOnce: true', () => {
+  test('afterNavigation function is called with refreshOnce: true', async () => {
     const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: true })
     const afterNavigation = jest.fn()
     const component = Vue.component('nav-component', {
@@ -151,6 +151,8 @@ describe('client', () => {
       }
     })
 
+    await vmTick(wrapper.vm)
+
     expect(guards.before).toBeDefined()
     expect(guards.after).toBeDefined()
 
@@ -161,7 +163,7 @@ describe('client', () => {
     expect(afterNavigation).toHaveBeenCalled()
   })
 
-  test('afterNavigation function is called with refreshOnce: false', () => {
+  test('afterNavigation function is called with refreshOnce: false', async () => {
     const Vue = loadVueMetaPlugin(false, { refreshOnceOnNavigation: false })
     const afterNavigation = jest.fn()
     const component = Vue.component('nav-component', {
@@ -184,6 +186,8 @@ describe('client', () => {
       }
     })
 
+    await vmTick(wrapper.vm)
+
     expect(guards.before).toBeDefined()
     expect(guards.after).toBeDefined()