Vue中切换页面时的过渡动画

定义层级

我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/pages/home/Home';
import List from '@/pages/list/List';
import Detail from '@/pages/detail/Detail';
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      meta:{index:0},
      component: Home
    },
    {
      path: '/list',
      name: 'List',
      meta:{index:1},
      component: List
    },
    {
      path: '/detail',
      name: 'Detail',
      meta:{index:2},
      component: Detail
    }
  ]
});

监控路由跳转

监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.

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