这篇文章给大家分享的是有关Vue2。X中钩子函数的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
美元路线可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是不变的(不可变)的,不过你可以观察(监测变化)它。
<>强导航和钩子函数:
导航:路由正在发生改变,,关键字:路由,变
钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数)
<强>,两者关系:
钩子函数——→导航:钩子函数,,主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数,最后钩子函数的执行结果会告诉导航怎么做. .
导航——→钩子函数:导航在所有钩子解决完之前一直处于等待中,等待钩子函数告诉它下一步该怎么做,接下来用()来指定。
<强>全局钩子函数之,,全局的beforeEach钩子:
,例子:在每次发生路由导航是最开始先检测用户是否登录
先说这个beforeEach的钩子函数,它是一个全局前的钩子函数,<强>(前)意思是在每次每一个路由改变的时候都得执行一遍。
<强>它的三个参数:
:(路线路由对象),即将要进入的目标路由对象,,,,,对象下面的属性:path ,params query ,hash ,fullPath ,,matched ,name ,,元(在匹配下,但是本例可以直接用)
<李>:(路线路由对象),当前导航正要离开的路由
<李>:(函数函数),,一定要调用该方法来解决这个钩子又是;调用方法:next(参数或者空),,* * *必须调用
下(无参数的时候):,进行管道中的下一个钩子,如果走到最后一个钩子函数,那么<强>,导航的状态就是证实(确认的)
下(& # 39;/& # 39;)或者next({路径:& # 39;/& # 39;}):<强>跳转到一个不同的地址强。当前的导航被中断,然后进行一个新的导航。
, <强>全局钩子函数之,,全局的afterEach钩子:
后钩子没有第二方法,不能改变导航,代表已经确定好了导航怎么去执行后,附带的一个执行钩子函数
<强>组件内的钩子函数:(beforeRouteEnter和beforeRouteLeave再加一个手表函数)
vue2.X的组件内钩子函数比vue1.X减少了许多. .
https://github.com/vuejs/vue-router/blob/43183911dedfbb30ebacccf2d76ced74d998448a/examples/navigation-guards/app.js L49
使用组件自身的生命周期钩子函数来替代激活和停用
<李>在路由器上美元使用观察者来响应路由改变
<李>canActivate可以被路由器的配置中的beforeEnter中实现
<李>canDeactivate已经被beforeRouteLeave取代,后者在一个组件的根级定义中指定。这个钩子函数在调用时是将组件的实例作为其上下文的。
<李>canReuse已经被移除,因其容易混淆且很少被用到。
<李>用ajax获取数据的数据(下),从钩子用组件内beforeRouteEnter(下),从来替代,
<强>先来解释下vue1。X中的组件内钩子函数:
组件的钩子函数一共6个:
数据:可以设置组件的数据
<李>激活:激活组件
<李>停用:禁用组件
<李>canActivate:组件是否可以被激活
<李>canDeactivate:组件是否可以被禁用
<李>canReuse:组件是否可以被重用
, vue-router1.X中,,每个切换钩子函数都会接受一个过渡对象作为参数,参数下有5个属性/方法,从下(),原因中止([])重定向(路径),
, vue-router2.X中,,其中后三个都归到下一个()函数里了,,所以next()函数改为3个直接的参数,(从下一个())
