mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-12 22:12:25 +03:00
Code Activity

fix: Handle kept-alive components & vue-router transitions

Browse Source
This commit is contained in:
Sebastien Chopin
2017-08-02 18:39:34 +02:00
parent 9c80a30c21
commit 42b56e6a0f
7 changed files with 71 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/index.html
+1
View File
@@ -9,6 +9,7 @@
<ul>
<li><a href="basic">Basic</a></li>
<li><a href="basic-render">Basic Render</a></li>
<li><a href="keep-alive">Keep alive</a></li>
<li><a href="vue-router">Usage with vue-router</a></li>
<li><a href="vuex">Usage with vuex</a></li>
<li><a href="vuex-async">Usage with vuex + async actions</a></li>
examples/keep-alive/app.js
+34
View File
@@ -0,0 +1,34 @@
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta)
Vue.component('foo', {
template: '<p>Foo component</p>',
metaInfo: {
title: 'Keep me Foo'
}
})
new Vue({
template: `
<div id="app">
<h1>Kept alive foo</h1>
<button @click="show">Toggle Foo</button>
<keep-alive>
<foo v-if="showFoo"/>
</keep-alive>
</div>
`,
data () {
return { showFoo: false }
},
methods: {
show () {
this.showFoo = !this.showFoo
}
},
metaInfo: () => ({
title: 'Keep-alive'
})
}).$mount('#app')
examples/keep-alive/index.html
+5
View File
@@ -0,0 +1,5 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/global.css">
<a href="/">&larr; Examples index</a>
<div id="app"></div>
<script src="/__build__/keep-alive.js"></script>
examples/vue-router/app.js
+3 -1
View File
@@ -46,7 +46,9 @@ const App = {
<h1>vue-router</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
<transition name="page" mode="out-in">
<router-view></router-view>
</transition>
<p>Inspect Element to see the meta info</p>
</div>
`
examples/vue-router/index.html
+8
View File
@@ -3,3 +3,11 @@
<a href="/">&larr; Examples index</a>
<div id="app"></div>
<script src="/__build__/vue-router.js"></script>
<style>
.page-enter-active, .page-leave-active {
transition: opacity .5s
}
.page-enter, .page-leave-to {
opacity: 0
}
</style>
src/shared/getComponentOption.js
+2
View File
@@ -18,6 +18,8 @@ export default function getComponentOption (opts, result = {}) {
const { component, option, deep, arrayMerge } = opts
const { $options } = component
if (component._inactive) return result
// only collect option data if it exists
if (typeof $options[option] !== 'undefined' && $options[option] !== null) {
let data = $options[option]
src/shared/plugin.js
+18 -1
View File
@@ -62,6 +62,18 @@ export default function VueMeta (Vue, options = {}) {
})
}
},
activated () {
if (this._hasMetaInfo) {
// batch potential DOM updates to prevent extraneous re-rendering
batchID = batchUpdate(batchID, () => this.$meta().refresh())
}
},
deactivated () {
if (this._hasMetaInfo) {
// batch potential DOM updates to prevent extraneous re-rendering
batchID = batchUpdate(batchID, () => this.$meta().refresh())
}
},
beforeMount () {
// batch potential DOM updates to prevent extraneous re-rendering
if (this._hasMetaInfo) {
@@ -73,7 +85,12 @@ export default function VueMeta (Vue, options = {}) {
if (this.$isServer) return
// re-render meta data when returning from a child component to parent
if (this._hasMetaInfo) {
batchID = batchUpdate(batchID, () => this.$meta().refresh())
// Wait that element is hidden before refreshing meta tags (to support animations)
const interval = setInterval(() => {
if (this.$el.offsetParent !== null) return
clearInterval(interval)
batchID = batchUpdate(batchID, () => this.$meta().refresh())
}, 50)
}
}
})