stack其實并不是一個很好的方案，正常從首頁進列表頁的話，返回都沒問題，但是列表頁直接刷新之后再回到首頁的時候就會有問題。

所以有這樣一個方案就是定義幾個數(shù)組，把有可能從前到后頁面轉場順序都定義出來，然后路由變化的時候，遍歷這幾個數(shù)組，查到這兩個路由在數(shù)組中的順序來決定使用哪種動畫

你想實現(xiàn)原生的stack的效果是吧，但是vue的路由是基于h5的history實現(xiàn)的，網上的思路：

我剛好做了一個app的項目,用到了這個方法.
可以自定義一個 meta的index,在 app.vue,比較當前的index和from的index,給transition添加從slide-right還是slide-left.

app.vue

<template>
  <div id="app">
    <transition :name="transitionName">
        <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      transitionName: ''
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > 0) {
        if (to.meta.index < from.meta.index) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
      } else if (to.meta.index === 0 && from.meta.index > 0) {
        this.transitionName = 'slide-right'
      }
    }
  }
}

router

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: resolve => require(['../page/home'], resolve),
      meta: {
        index: 0
      }
    },
    {
      path: '/center',
      name: 'center',
      component: resolve => require(['../page/center'], resolve),
      meta: {
        index: 1
      }
    },
    {
      path: '/account',
      name: 'account',
      component: resolve => require(['../page/account'], resolve),
      meta: {
        index: 2
      }
    }
  ]
})

路由切換動畫

.child-view {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.45s ease-out;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate(0%, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate(100%, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate(0%, 0);
}