fix page transitions

This commit is contained in:
James Homer 2017-09-09 12:12:07 +01:00
parent e937937ea1
commit 2bf02731f2
3 changed files with 9 additions and 7 deletions

View File

@ -2,7 +2,7 @@
<div id="__nuxt"> <div id="__nuxt">
<% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %> <% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
<% if (layoutTransition) { %><transition name="<%= layoutTransition.name %>" mode="<%= layoutTransition.mode %>"><% } %> <% if (layoutTransition) { %><transition name="<%= layoutTransition.name %>" mode="<%= layoutTransition.mode %>"><% } %>
<component v-if="layout" :is="nuxt.err ? 'nuxt' : layout"></component> <component v-if="layout" :is="nuxt.err ? 'nuxt' : layout" :key="layoutName"></component>
<% if (layoutTransition) { %></transition><% } %> <% if (layoutTransition) { %></transition><% } %>
</div> </div>
</template> </template>

View File

@ -43,9 +43,9 @@ export default {
const layoutUid = parent._uid const layoutUid = parent._uid
const layoutName = component.options ? component.options.layout : null const layoutName = component.options ? component.options.layout : null
// If we're changing layout return the stored vnode // If we're changing layout render the stored vnode
if (nuxt._layoutUid === layoutUid && if (nuxt._layoutUid === layoutUid &&
nuxt._layoutName !== layoutName) return nuxt._layoutVnode nuxt._layoutName !== layoutName) return nuxt._childVnode
nuxt._layoutUid = layoutUid nuxt._layoutUid = layoutUid
nuxt._layoutName = layoutName nuxt._layoutName = layoutName
@ -76,13 +76,13 @@ export default {
} }
}) })
nuxt._layoutVnode = h('transition', { nuxt._childVnode = h('transition', {
props: transitionProps, props: transitionProps,
on: listeners on: listeners
}, [ }, [
h('router-view', data) h('router-view', data)
]) ])
return nuxt._layoutVnode return nuxt._childVnode
} }
} }

View File

@ -1,6 +1,8 @@
<template> <template>
<div class="nuxt">
<nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error> <nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error>
<nuxt-child :key="routerViewKey" v-else></nuxt-child> <nuxt-child :key="routerViewKey" v-else></nuxt-child>
</div>
</template> </template>
<script> <script>