从 Vue2 到 Vue3 ，你必须要掌握的路由差异和使用场景！

,很多兄弟在使用 Vue3 了，但对 Vue3 的路由却了解的非常少。甚至只知道基本的跳转和参数获取，这样做一些稍微复杂的功能肯定不够用的。最近就把 Vue3 的路由（Vue-Router4）的版本差异和使用场景整理了一下分享给大家。会的兄弟可以复习一下，不会的兄弟抓紧学起来哦！,Vue3 中不再使用 new Router() 创建 router ，而是调用 createRouter 方法：,路由模式 mode 配置改为 history ，属性值调整为：,基础路径 base 被作为 createWebHistory 的第一个参数进行传递（其他路由模式也是一样）：,使用组件跳转，方式还是和 Vue2 一样：,当然，最常见的还是编程式导航，这时候需要引入 useRouter 方法：,注意：参数 params 不能和 path 一起使用。RouterLink 组件 to 属性与 router.push() 接受的参数相同，两者的规则也完全相同。,全局前置守卫通常用来做权限控制，使用 router.beforeEach 即可添加：,每个守卫方法接收两个参数：,可以返回的值如下:,在之前的 Vue Router 版本中，也是可以使用第三个参数 next 的。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，要确保 next 在导航守卫中只被调用一次。,全局解析守卫,router.beforeResolve 用法和 router.beforeEach 类似。它是在导航被确认之前，所有组件内守卫和异步路由组件被解析之后被调用。下面这个例子，确保用户可以访问自定义 meta 属性：,router.beforeResolve 是获取数据或执行任何其他操作（进入所有页面后都执行的操作）的理想位置。,和守卫不同的是，全局后置钩子不接受 next 函数，也不能跳转到其他的路由地址：,但它可以接收 failure 作为第三个参数：,router.afterEach 对于访问分析、更改页面标题、声明页面等辅助功能都很有帮助。,我们可以直接在路由配置上定义 beforeEnter 守卫：,beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects 不会触发。,我们也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：,当然，你也可以通过使用路由的 meta 属性和 全局导航守卫 来实现以上功能。,使用声明式 API ，你可以为组件添加以下守卫：,beforeRouteEnter 守卫不能访问 this，因为此时组件还没有被创建。你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：,注意：beforeRouteEnter 是支持 next 传递回调函数的唯一守卫。,beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用。比如，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候被调用。因为这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this。,beforeRouteLeave 通常用来预防用户在还未保存修改前突然离开。该守卫可以通过返回 false 来取消导航。,使用组合式 API，你可以为组件添加 onBeforeRouteUpdate 、onBeforeRouteLeave 导航守卫：,注意：由于 setup 函数调用时机的问题，使用组合式 API 不存在 onBeforeRouteEnter。,当我们获取路由参数时，通常在模板中使用 $route ，在逻辑中调用 useRoute() 方法，如：,以上方法比较麻烦，而且与路由紧密耦合，不利于组件封装。我们可以在创建路由时通过 props 配置来解除这种行为：,此时 route.params 将直接被设置为组件的 props，这样组件就和路由参数解耦了：,当 props 设置为 true 时，route.params 将被设置为组件的 props。,对于有命名视图的路由，你必须为每个命名视图定义 props 配置：,当 props 是一个对象时，它会将此对象设置为组件 props 。当 props 是静态的时候很有用。,我们也可以创建一个返回 props 的函数。这允许你将参数转换为其他类型：,如 /user?userId=123 参数会被转为 { id: ‘123’ } 作为 props 传给 User 组件。,我们可以通过 vue-router 自定义路由切换时页面如何滚动。比如，当跳转到新路由时，页面滚动到某个位置；切换路由时页面回到之前的滚动位置。,当创建路由实例时，我们只需要提供一个 scrollBehavior 方法：,scrollBehavior 函数接收 to和 from 路由对象。第三个参数 savedPosition，只有当这是一个 popstate 导航时才可用（点击浏览器的后退/前进按钮，或者调用 router.go() 方法）。,该函数可以返回一个 ScrollToOptions 位置对象：,也可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top 和 left 将被视为该元素的相对偏移量。,还可以模拟 “滚动到锚点” ：,返回 savedPosition，在按下浏览器 后退/前进 按钮，或者调用 router.go() 方法时，页面会回到之前的滚动位置：,提示：如果返回一个 falsy 的值，或者是一个空对象，则不会发生滚动。我们还可以在返回的对象中添加 behavior: ‘smooth’ ，让滚动更加丝滑。,有时候，我们不希望立即执行滚动行为。例如，当页面做了过渡动效，我们希望过渡结束后再执行滚动。要做到这一点，我们可以返回一个 Promise ：,如果想要在路由组件上使用转场，对导航进行动画处理，我可以使用 v-slot 结合 Animete.css 来实现：,上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，可以将 元信息 和动态的 enter-active-class 结合在一起，放在<transition> 上：,定义以上路由，当从 /user/123 切换到 /user/456 时是没有任何过渡效果的。这时候我们可以添加一个 key 属性来强制进行过渡，key 值只要不同就行了。说白了就是让 Dom 不要被复用，和 v-for 的 key 属性原理刚好相反。,当我们做用户权限的时候，添加路由非常有用。可以使用 router.addRoute() 来添加一个路由：,注意：跟之前版本不同的是，路由只能一个一个添加，不能批量添加。,以下几个方法都可以删除路由：,1、通过使用 router.removeRoute() 按名称删除路由：,2、通过添加一个名称相同的路由，替换掉之前的路由：,3、通过调用 router.addRoute() 返回的回调函数：,当路由没有名称时，这种方法非常有用。,要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute() ，这和通过 children 添加的效果一样：,这相当于：,今天把 Vue-Router4 的主要功能跟大家过了一遍，大部分来自官网，也有一些来自自己的实践心得。希望对你的开发工作有所帮助。当然这并不是 Vue-Router4 的所有内容，比如还有路由匹配、重定向和别名等等，大家可以自行在官网查看。后面我会分享更多 Vue3 相关的干货，欢迎大家关注我，关注我的专栏。