vue-page-transition-helper

description

helps to get a push pop state when you build an app with a native app like behavior based on vue-router
returns different value regardless of depth of link:

// returns 'forward'
this.$router.push('/some-link')
// returns 'back'
this.$router.go(-1)

usage

npm install --save vue-page-transition-helper

main.js

import { VuePageTransitionHelper } from 'vue-page-transition-helper'
import router from './router'

Vue.use(VuePageTransitionHelper, { router })

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

./router/router.js

// dosen't have to be changed

Vue.use(Router)

export default new Router({
  ...
})

App.vue

<transition :name="transitionName">
  <router-view></router-view>
</transition>

import { VuePageTransitionHelper } from 'vue-page-transition-helper'

export default {
  name: 'App',
  data () {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route' (to, from) {

      // here does slightly changes to the official vue-router example

      if (VuePageTransitionHelper.getState() === 'forward') {
        this.transitionName = 'slide-left'
      } else if (VuePageTransitionHelper.getState() === 'back') {
        this.transitionName = 'slide-right'
      }
    }
  }
}

...