Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-23 22:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Configurable key property for transitions

Browse Source 
The vue-router component can have a 'key' property which means it's easier to configure transitions between routes with slugs.

With this change in a layout template you can use
```html
<nuxt :routerViewKey="routerViewKey" />
```
And the following for example
```js
    computed: {
      routerViewKey () {
        if (this.$route.name === 'service') {
          return this.$route.name
        } else {
          return this.$route.fullPath
        }
      }
    }
```
This would implement the functionality that @myst729 mentioned here https://github.com/vuejs/vue-router/issues/474 for vue-router - some routes can just switch, but some you may want to transition as though it's a complete new page to an end-user

This is a possible resolution to issue raised here https://github.com/nuxt/nuxt.js/issues/1021
This commit is contained in:
Daniel West 2017-07-03 18:19:29 +01:00 committed by GitHub
parent d3cacd0e58
commit 825d0e4c82
1 changed files with 2 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/app/components/nuxt.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error> <nuxt-error v-if="nuxt.err" :error="nuxt.err"></nuxt-error>
<nuxt-child v-else></nuxt-child> <nuxt-child :key="routerViewKey" v-else></nuxt-child>
</template> </template>
<script> <script>
@ -10,6 +10,7 @@ import NuxtError from '<%= components.ErrorPage ? ((components.ErrorPage.include
export default { export default {
name: 'nuxt', name: 'nuxt',
props: ['routerViewKey'],
beforeCreate () { beforeCreate () {
Vue.util.defineReactive(this, 'nuxt', this.$root.$options._nuxt) Vue.util.defineReactive(this, 'nuxt', this.$root.$options._nuxt)
}, },