基于Vue2.X的路由和钩子函数详解
最近上班有些忙，好久没有更新文章，也没学习新的东西。
今天来说说这个路由钩子吧。
导航和钩子函数：
导航：路由正在发生改变关键字：路由变
钩子函数：在路由切换的不同阶段调用不同的节点函数（钩子函数在我看来也就是：某个节点和时机触发的函数）。
钩子函数主要用来拦截导航，让它完成跳转或取消，在导航的不同阶段来执行不同的函数，最后钩子函数的执行结果会告诉导航怎么做。。
导航在所有钩子resolve完之前一直处于等待中，等待钩子函数告诉它下一步该怎么做。用next()来指定。
我来给大家举个登陆的例子
router.beforeEach(({meta,path},from,next)=>{
const{auth=true}=meta//meta代表的是to中的meta对象，path代表的是to中的path对象
varisLogin=Boolean(store.state.user.id)//true用户已登录，false用户未登录
if(auth&&!isLogin&&path!=='/login'){//auth代表需要通过用户身份验证，默认为true，代表需要被验证，false为不用检验
returnnext({path:'/login'})//跳转到login页面
}
next()//进行下一个钩子函数
})
先说这个beforeEach的钩子函数，它是一个全局的before钩子函数，（beforeeach）意思是在每次每一个路由改变的时候都得执行一遍。
它的三个参数：
to:(Route路由对象)即将要进入的目标路由对象to对象下面的属性：pathparamsqueryhashfullPathmatchednamemeta（在matched下，但是本例可以直接用）
from:(Route路由对象)当前导航正要离开的路由
next:(Function函数)一定要调用该方法来resolve这个钩子。调用方法：next(参数或者空)***必须调用
next(无参数的时候):进行管道中的下一个钩子，如果走到最后一个钩子函数，那么导航的状态就是confirmed（确认的）
next('/')或者next({path:'/'}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
全局钩子函数之全局的afterEach钩子：
after钩子没有next方法，不能改变导航，代表已经确定好了导航怎么去执行后，附带的一个执行钩子函数
组件内的钩子函数：（beforeRouteEnter和beforeRouteLeave再加一个watch函数）
vue2.X的组件内钩子函数比vue1.X减少了许多。。
使用组件自身的生命周期钩子函数来替代activate和deactivate
在$router上使用watcher来响应路由改变
canActivate可以被router的配置中的beforeEnter中实现
canDeactivate已经被beforeRouteLeave取代,后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。
canReuse已经被移除，因其容易混淆且很少被用到。
用ajax获取数据的data(to,from,next)钩子用组件内beforeRouteEnter(to,from,next)来替代
以上这篇基于Vue2.X的路由和钩子函数详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。