【vue-router源码】9.全局导航守卫的实现

前言【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本系列的源码文章参考vue-routerv4.0.15。源码地址：https://github.com/vuejs/router阅读本文的前提是你最好了解vue-router的基本使用。如果没有使用过，可以通过vue-router官网进行学习。本文将分析globalnavigationguards的实现。共有三种全局导航守卫：beforeEach：在任何导航之前执行。返回一个函数，该函数删除已注册的导航守卫。beforeResolve：在导航解析之前执行。返回一个函数，该函数删除已注册的导航守卫。afterEach：在任何导航之后执行。返回一个函数，该函数删除已注册的导航守卫。constrouter=createRouter({//...})router.beforeEach=function(){//...}router.beforeResolve=function(){//...}router.afterEach=function(){//...}globalnavigationguard实现globalnavigationguard和onError是通过维护一个数组来实现的。在vue-router中，可以使用useCallbacks函数来创建可重置列表。全局钩子和onError是通过useCallbacks实现的。常量beforeGuards=useCallbacks>（）添加,beforeResolve:beforeResolveGuards.add,afterEach:afterGuards.add,onError:errorHandlers.add,//...}useCallbacks:exportfunctionuseCallbacks(){lethandlers:T[]=[]functionadd(处理程序:T):()=>void{handlers.push(handler)return()=>{consti=handlers.indexOf(handler)if(i>-1)handlers.splice(i,1)}}函数重置(){handlers=[]}return{add,list:()=>handlers,reset,}}useCallbacks返回一个对象，具有三个属性，其中list是内部维护的列表；add是添加handler的函数,返回的是删除对应handler的函数；reset是重置列表的函数。对于全局导航guar的执行时机d、请参考：router.push