具體的項目創(chuàng)建這里就不說了躏嚎，直接參考官方文檔就夠了：安裝 | Vue.js (vuejs.org)
不得不說伴找，vite 是真滴強养匈，速度比起webpack 快了好幾倍，用過就真的回不去了债蓝。本次的實踐是實現(xiàn)一個常見的后臺管理系統(tǒng)，細節(jié)會盡量跳過，只集中在路由上面去展示和記錄挺智。
先看看主體的路由結(jié)構(gòu)
結(jié)構(gòu).png
首先整個頁面就是一級路由，通常會有登錄頁窗宦，報錯頁赦颇，主頁之間的切換，這里也是做路由切換動畫的主要地方赴涵。當(dāng)頂部有導(dǎo)航菜單的時候紅色框就是二級路由媒怯，以此類推綠色框就是三級路由。
安裝和配置vue-router
創(chuàng)建好vue3項目的第一步就是安裝vue-router ,因為vite 默認并沒有安裝的髓窜。參考官網(wǎng)：安裝 | Vue Router (vuejs.org)
然后在src 目錄下創(chuàng)建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
})
// 動態(tài)修改路由過度動畫
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: '統(tǒng)計圖',
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.動畫類名發(fā)生了一點變化程拭，開始和結(jié)束變成了from 和 to 定踱，所以不能直接吧vue2的過度動畫復(fù)制過來，需要做一些改動恃鞋。
/* 下滑 */
.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;
}
