隨著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，記錄是前進還是後退。 可還行