vue3路由相关使用差异

cheeseCui

已于 2023-08-22 10:32:38 修改

阅读量180

点赞数

分类专栏： vue3 vue-router 文章标签： vue.js 前端

于 2020-10-23 14:51:45 首次发布

本文链接：https://blog.csdn.net/cheeseC/article/details/109242438

版权

vue3 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue-router

1 篇文章 0 订阅

订阅专栏

本文概述了Vue3中关于<router-view>、<keep-alive>和<transition>的使用变化，介绍了动态路由添加的更新方法，以及beforeEach路由守卫的调整。重点讲解了从Vue2到Vue3的迁移技巧和新特性。

摘要由CSDN通过智能技术生成

在使用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