在使用vue3开发过程中,遇到除了结构以及数据双向绑定方式等一些显而易见的不同,还有下面一些区别:
1. <router-view>、<keep-alive> 和 <transition>
(可参考官网介绍https://router.vuejs.org/zh/guide/migration/#router-view-、-keep-alive-和-transition)
- vue3中transition和keep-alive必须在router-view内部,通过v-solt使用:
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
- vue2中通常使用 keep-alive包裹router-view
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
2. vue-router 动态路由的添加
- vue-router3x中:可以通过router.addRoutes(routes: Array)方式添加路由数组,官网现在标识“已废弃:使用 router.addRoute() 代替。”了;
- vue-router4x中使用:
// 添加一个新的路由
// 如果有parentName参数,则其作为已有路由子路由
addRoute(parentName, route): () => void
3. 路由守卫beforeEach
- vue-router3x:钩子函数有三个参to、from、next,next是必须的,导航的跳转依赖next,在各种判断中必须将next补全
- vue-router4x:next是可选参数,路由的跳转依据return返回值,返回值可以是false或路由地址(这种情况与next参数用法类似),如果没有返回值、defined或为true,导航也是有效的。因此在处理各种判断时,可以不考虑返回to的情况了,简化代码。(点击这里查看官方介绍)
注意:在使用return方式时,如果判断里面有异步,需要await后再return