Vue Router学习（十四）—— 组合式API

前言

为了更好地适配vue3，vue rouer4.x版本也引入了组合式API的写法，前面我们也简单用了下，本节我们系统讲解一下vue router的组合式API。

路由相关

在vue2中我们想要获取路由相关信息或者进行路由导航，可以通过访问实例this：

// 路由信息 名称等
this.$route
// 路由跳转
this.$router 

而vue3中setup不能访问this，这时候就需要用新的API------useRouter , useRoute，这两个用法也很简单：

//路由相关跳转
const router = useRouter()
//路由信息
const route = useRoute()

useRoute的源码我们在讲解路由对象的时候提到过，这里我们简单回顾下。打开vue router源码找到useApi：

核心思路就是通过provide与inject，在实例化的时候将route与router信息收集，再通过inject拿到，整个逻辑还是很简单的。

导航守卫

前两节我们刚讲解过导航守卫，其中光组件导航守卫有三个，而在组合式API中只有两个相关的API:

• onBeforeRouteLeave:路由离开时触发的守卫，效果、用法与beforeRouteLeave 类似，并且不能访问this。

import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => { 
})

-onBeforeRouteUpdate:路由更新时触发的守卫，跟beforeRouteUpdate类似。

import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to, from) => { 
})

注意导航相关的组合式API只要是由<router-view>渲染的组件都能够生效，要比组件导航适用范围大：

<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对象，我们就是用这些属性来自定义链接。

//点击跳转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写出正确的逻辑。