具体的项目创建这里就不说了，直接参考官方文档就够了：安装 | Vue.js (vuejs.org)
不得不说，vite 是真滴强，速度比起webpack 快了好几倍，用过就真的回不去了。本次的实践是实现一个常见的后台管理系统，细节会尽量跳过，只集中在路由上面去展示和记录。
先看看主体的路由结构
结构.png
首先整个页面就是一级路由，通常会有登录页，报错页，主页之间的切换，这里也是做路由切换动画的主要地方。当顶部有导航菜单的时候红色框就是二级路由，以此类推绿色框就是三级路由。
安装和配置vue-router
创建好vue3项目的第一步就是安装vue-router ,因为vite 默认并没有安装的。参考官网：安装 | Vue Router (vuejs.org)
然后在src 目录下创建router目录，并添加2个文件index.js,routes.js.
// index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
history: createWebHashHistory(), // hash 模式，想要改为history 模式可以使用createWebHistory
routes
})
// 动态修改路由过度动画
router.afterEach((to, from) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
console.log(toDepth)
console.log(fromDepth)
console.log(to)
console.log(from)
if (to.path == '/login') {
to.meta.transitionName = 'down'
from.meta.transitionName = 'opt'
} else if (from.path == '/login') {
from.meta.transitionName = 'down'
to.meta.transitionName = 'up'
} else {
to.meta.transitionName = toDepth <= fromDepth ? 'slide_left' : 'slide_right'
}
})
export default router
// routes.js
const routes = [
{ //一级路由
path: '/',
name: '/',
title: '首页',
component: () => import('@/components/home.vue'),
children: [ // 二级路由
{
path: 'mainPage',
name: 'mainPage',
title: '主页',
component: () => import('@/components/mainPage/mainPage.vue'),
children: [ // 三级路由
{
path: 'dataChart',
name: 'dataChart',
title: '统计图',
component: () => import('@/components/mainPage/dataChart.vue'),
},
]
}
]
},
{
path: '/login',
name: 'login',
title: '登录',
component: () => import('../components/login.vue'),
meta: {
transition: 'down'
}
}
]
export default routes
路由动画
这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：
1.transition组件在vue 2 中是作为父级包裹路由router-view 的，到了vue3就反过来了
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transitionName">
<component :is="Component" />
</transition>
</router-view>
2.动画类名发生了一点变化，开始和结束变成了from 和 to ，所以不能直接吧vue2的过度动画复制过来，需要做一些改动。
/* 下滑 */
.down-enter-active,.down-leave-active{
transform: translate3d(0,0,0);
opacity: 1;
}
.down-enter-from{
transform: translate3d(0,-50%,0);
opacity: 0.2;
},
.down-leave-to{
transform: translate3d(0,50%,0);
opacity: 0.2;
}
