Vue路由切换动画

效果

vue3路由切换动画

准备文件目录

router下index.js文件的配置内容

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'main',
    component: () => import('../views/MainView.vue'),
    children: [
      {
        path: '/home',
        name: 'home',
        component: () => import('../views/HomeView.vue'),
        meta: { footerIndex: 0 }
      },
      {
        path: '/about',
        name: 'about',
        component: () => import('../views/AboutView.vue'),
        meta: { footerIndex: 1 }
      },
      {
        path: '/search',
        name: 'search',
        component: () => import('../views/SearchView.vue'),
        meta: { footerIndex: 2 }
      },
      {
        path: '/setting',
        name: 'setting',
        component: () => import('../views/SettingView.vue'),
        meta: { footerIndex: 3 }
      }
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

views下的MainView.vue的配置内容

<template>
    <div class="child-view">
        <transition :name="transitionName">
            <router-view :key="$route.name" class="route"></router-view>
        </transition>
        <van-tabbar route>
            <van-tabbar-item icon="home-o" to="/home">我的</van-tabbar-item>
            <van-tabbar-item icon="search" to="/about">关于</van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="/search">查看</van-tabbar-item>
            <van-tabbar-item icon="setting-o" to="/setting">设置</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    name: 'MainView',
    data() {
        return {
            transitionName: ''
        }
    },
    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler(to, from) {
                if (from != undefined && to.meta.footerIndex > from.meta.footerIndex) {
                    this.transitionName = 'slide-left';
                } else {
                    this.transitionName = 'slide-right';
                }
            }
        }
    }
}
</script>
<style>
.child-view {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
}
.route{
    width: 100vw;
    height: 100vh;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
    will-change: transform;
    transition: all 1s;
    position: absolute;
}

.slide-left-enter-from,
.slide-left-leave-to {
    opacity: 0;
    transform: translateX(100%);
}

.slide-left-enter-to,
.slide-left-leave-from {
    opacity: 1;
    transform: translateX(0%);
}

.slide-right-enter-from,
.slide-right-leave-to {
    opacity: 0;
    transform: translateX(-100%);
}

.slide-right-enter-to,
.slide-right-leave-from {
    opacity: 1;
    transform: translateX(0%);
}
</style>

main.js文件中的配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css';
import { Tabbar, TabbarItem } from 'vant';
createApp(App).config.productionTip = false
createApp(App)
.use(store)
.use(router)
.use(Tabbar)
.use(TabbarItem)
.mount('#app')