vue3使用路由keep-alive和监听路由实现transition

　　随着vue3.0的发布，vue-router发布了4.0版本，文档 很明了，提供了vue2路由到vue3的变化和写法指导。

　　vue2：

// transition
<transition name="van-fade">
      <router-view />
</transition>


// keep-alive
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>

　　vue3:

  <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transitionName">
      <keep-alive v-if="route.meta.keepAlive">
        <component :is="Component" />
      </keep-alive>
      <component :is="Component" v-else />
    </transition>
  </router-view>

　　需要使用 v-slot API来传入渲染的comp和route对象，而不再用this.$route

　　route.js写法大体没啥变化，写在最后的未匹配上路由的rediect，需要用正则来匹配

  {
    // path: '/*',
    path: '/:pathMatch(.*)*',
    redirect: '/',
  },

　　监听路由前进后退实现transtion的动画效果，查了许多资料都有点不太完善，有用数组存住history 每次手动push和pop然后比对的，有用storage的，有用子路由‘/’来对比的...

　　我的方式:

　　

// route
router.beforeEach((to, from) => {

  const toDepth = to.path.split('/').length;
  const fromDepth = from.path.split('/').length;

  to.meta.transitionName =
    toDepth > fromDepth ?
      'slide-left' :
      (to.path === store.state.pushPath ?
        'slide-left' :
        'slide-right');

});


// store
  state: {
    pushPath: '',
  },
  mutations: {
    setPushPath(state, payload) {
      state.pushPath = payload;
    },
  },

// util
export const push = (path: string, params?: Record<string, string | number>): void => {
    store.commit('setPushPath', path);
    router.push({ path, params });
};

　　每次跳转使用自己简单封装的路由api，记录是前进还是后退。 可还行