mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-20 01:30:34 +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>