html5网站建设中模板,网站建设技术服务协议,做一个网站成本要多少钱,域名网站这么做vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航分为#xff1a;全局的#xff0c;单个路由独享的和组件级的。
一、全局路由守卫1、全局前置守卫 beforeEach 在全局前置守卫中#xff0c;我们可以访问到即将要进入的路由对象 to#xff0c;以及当前的路由…vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航分为全局的单个路由独享的和组件级的。
一、全局路由守卫1、全局前置守卫 beforeEach 在全局前置守卫中我们可以访问到即将要进入的路由对象 to以及当前的路由对象 from。另外还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象则会跳转到该路由。如果不调用 next 函数则当前路由不会发生变化。2、全局解析守卫 beforeResolve 全局解析守卫是在路由解析之前进行拦截和控制的它会在所有全局前置守卫 resolve 完成之后被调用3、全局后置守卫 afterEach 全局后置守卫会在每次路由跳转结束后被调用无论是正常跳转还是取消跳转afterEach 钩子不像其他路由钩子一样不能通过调用 next 函数来控制路由的跳转行为因为此时路由跳转已经结束了。如果在 afterEach 钩子中调用 next 函数则会抛出一个错误。二、路由独享守卫 beforeEnter 路由独享守卫是针对某个具体的路由实例进行拦截和控制beforeEnter 守卫只在进入路由时触发不会在 params、query 或 hash 改变时触发三组件内的守卫 1、beforeRouteEnter在路由进入该组件之前被调用
2、beforeRouteUpdate在路由更新该组件时被调用
3、 beforeRouteLeave在路由离开该组件时被调用
beforeRouteEnter 守卫不能访问 this因为守卫在导航确认前被调用此时新组件还没被创建通过传一个回调给 next 来访问组件实例在导航被确认的时候执行回调并且把组件实例作为回调方法的参数。beforeRouteEnter 是支持给 next 传递回调的唯一守卫对于 beforeRouteUpdate 和 beforeRouteLeave 来说this 已经可用了所以不支持传递回调。
完整的导航解析流程
导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫(2.2)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫(2.5)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用 beforeRouteEnter 守卫中传给 next 的回调函数创建好的组件实例会作为回调函数的参数传入。
