2
0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-11 19:22:25 +03:00

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
This commit is contained in:
pimlie
2019-04-23 09:30:29 +02:00
parent 9d18b50263
commit e80643b1a8
2 changed files with 13 additions and 13 deletions
+7 -11
View File
@@ -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))
+6 -2
View File
@@ -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()