前言
为了更好地适配vue3，vue rouer4.x版本也引入了组合式API的写法，前面我们也简单用了下，本节我们系统讲解一下vue router的组合式API。
路由相关
在vue2中我们想要获取路由相关信息或者进行路由导航，可以通过访问实例this：
js
// 路由信息 名称等
this.$route
// 路由跳转
this.$router 而vue3中setup不能访问this，这时候就需要用新的API------useRouter , useRoute，这两个用法也很简单：
js
//路由相关跳转
const router = useRouter()
//路由信息
const route = useRoute()useRoute的源码我们在讲解路由对象的时候提到过，这里我们简单回顾下。打开vue router源码找到useApi：
核心思路就是通过provide与inject，在实例化的时候将route与router信息收集，再通过inject拿到，整个逻辑还是很简单的。
导航守卫
前两节我们刚讲解过导航守卫，其中光组件导航守卫有三个，而在组合式API中只有两个相关的API:
- onBeforeRouteLeave:路由离开时触发的守卫，效果、用法与beforeRouteLeave 类似，并且不能访问this。
js
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => {
})-onBeforeRouteUpdate:路由更新时触发的守卫，跟beforeRouteUpdate类似。
js
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to, from) => {
})注意导航相关的组合式API只要是由<router-view>渲染的组件都能够生效，要比组件导航适用范围大：
js
<router-view></router-view>
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to, from) => {
//此时router-view相关组件都能打印出来
console.log(to)
})接下来我们来解析下源码，上节我们解析了全局路由守卫的源码，具体的实现过程就是收集、执行，其中守卫的执行就是通过Promise链式调用按照顺序去判断执行，我们重点放到收集就行。首先我们来看下onBeforeRouteLeave：
- onBeforeRouteLeave需要先引入才能使用，不满足条件直接return并给出警告。
- 通过inject获取路由相关的信息，key值为matchedRouteKey，provide的地方在RouterView，这也解释了组合式API广泛的适用性。
- 接着判断activeRecord，不满足给出警告，这些警告信息也能够帮我们梳理思路，理解源码。
- 最后通过registerGuard收集守卫，这是组合式API中的核心方法，第二个参数很明显时为了适配update。
该方法思路很清晰，通过生命周期 进行导航守卫的增删，也就是我们所说的收集，接下来就是执行，我们搜索leaveGuards关键词就能找到对应的源码。
在router时添加到guards，通过链式调用进行执行。
RouterLink
RouterLink是创建路由导航的一个组件，如果我们想要在函数中自定义链接就需要用到useLink，它能够接收与RouterLink类似的props对象，我们就是用这些属性来自定义链接。
js
//点击跳转login
<a :href="href">
import { useLink } from 'vue-router'
import { ref } from 'vue'
const to = ref({ paht: '/login' })
const { href } = useLink(to);useLink日常开发中用的就比较少了，源码相关我们就不再展开赘述。
总结
组合式API就是针对setup引入的几个API，我们要熟悉相关写法才能在setup写出正确的逻辑。