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