diff --git a/examples/vue-router/app.js b/examples/vue-router/app.js index 0342a95..2e7b5dc 100644 --- a/examples/vue-router/app.js +++ b/examples/vue-router/app.js @@ -11,8 +11,18 @@ const ChildComponent = { template: `

You're looking at the {{ page }} page

`, metaInfo () { return { - title: this.page + title: `${this.page} - ${this.date && this.date.toTimeString()}` } + }, + data() { + return { + date: null + }; + }, + mounted() { + setInterval(() => { + this.date = new Date(); + }, 1000); } } diff --git a/src/shared/mixin.js b/src/shared/mixin.js index 742c353..89b2b74 100644 --- a/src/shared/mixin.js +++ b/src/shared/mixin.js @@ -9,8 +9,10 @@ export default function createMixin(options) { const updateOnLifecycleHook = ['activated', 'deactivated', 'beforeMount'] const triggerUpdate = (vm) => { - // batch potential DOM updates to prevent extraneous re-rendering - batchID = batchUpdate(batchID, () => vm.$meta().refresh()) + if (vm.$root._vueMetaInitialized) { + // batch potential DOM updates to prevent extraneous re-rendering + batchID = batchUpdate(batchID, () => vm.$meta().refresh()) + } } // watch for client side component updates @@ -46,6 +48,24 @@ export default function createMixin(options) { this.$options[lifecycleHook].push(() => triggerUpdate(this)) }) + // force an initial refresh on page load and prevent other lifecycleHooks + // to triggerUpdate until this initial refresh is finished + // this is to make sure that when a page is opened in an inactive tab which + // has throttled rAF/timers we still immeditately set the page title + if (isUndefined(this.$root._vueMetaInitialized)) { + this.$root._vueMetaInitialized = false + + this.$root.$options.mounted = this.$root.$options.mounted || [] + this.$root.$options.mounted.push(() => { + if (!this.$root._vueMetaInitialized) { + this.$nextTick(function () { + this.$root.$meta().refresh() + this.$root._vueMetaInitialized = true + }) + } + }) + } + // do not trigger refresh on the server side if (!this.$isServer) { // re-render meta data when returning from a child component to parent