vue3实践---路由router

具体的项目创建这里就不说了，直接参考官方文档就够了：安装 | 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;
}