网站建设与管理实训课程,西安官网seo技术,wordpress 视频 去广告插件,wps连接wordpress目录 1.导航钩子的作用
2.导航钩子的分类
3.全局守卫
4.路由独享守卫
5.局部守卫
6.路由跳转导航解析流程#xff0c;当由A路由–B路由的时候 1.导航钩子的作用
vue-router提供的导航钩子主要用来拦截导航#xff0c;让它完成跳转或取消。
2.导航钩子的分类
全局守…目录 1.导航钩子的作用
2.导航钩子的分类
3.全局守卫
4.路由独享守卫
5.局部守卫
6.路由跳转导航解析流程当由A路由–B路由的时候 1.导航钩子的作用
vue-router提供的导航钩子主要用来拦截导航让它完成跳转或取消。
2.导航钩子的分类
全局守卫路由独享守卫局部守卫
3.全局守卫
是指路由示例上直接操作的钩子函数特点是所有路由配置的组件都会触发。简单点说就是触发路由就会触发这些钩子函数。钩子函数执行顺序包括beforeEach、beforeResolve、afterEach三个。
[beforeEach]在路由跳转前触发参数包括to,from,next三个这个钩子作用主要是用于登录验证也就是路由还没跳转提前告知以免跳转了再通知就为时已晚。 router.beforeEach router.beforeResolve router.afterEachconst router new VueRouter({ ... });router.beforeEach((to, from, next) {// do someting});to代表要进入的目标它是一个路由对象from代表当前正要离开的路由同样也是一个路由对象next这是一个必须需要调用的方法而具体的执行效果则依赖next方法调用的参数
[beforeResolve]这个钩子和beforeEach类似也是路由跳转前触发参数也是to,from,next三个和beforeEach区别官方解释为 区别是在导航被确认之前同时在所有组件内守卫和异步路由组件被解析之后解析守卫就会被调用。即在beforeEach和组件内beforeRouteEnter之后afterEach之后afterEach之前调用。
[afterEach]和beforeEach相反它是在路由跳转完成之后触发参数包括to、from没有了next它发生在beforeEach和beforeResolve之后beforeRouteEnter(足迹按内守卫)之前。
const router new VueRouter({ ... });router.beforeEach((to, from, next) {// do someting});//全局后置钩子后置钩子并没有 next 函数也不会改变导航本身router.afterEach((to, from) {// do someting});4.路由独享守卫
是指在单个路由配置的时候也可以设置的钩子函数且只能在这个路由下起作用。其位置如下也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。
[beforeEnter]和beforeEach完全相同如果都设置则在beforeEach之后紧随执行参数有to、from、next。 cont router new VueRouter({routes: [{path: /file,component: File,beforeEnter: (to, from ,next) {// do someting}}]});5.局部守卫
是指在组件内执行的钩子函数类似于数组内的生命周期函数相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三个执行位置如下 const File {template: divThis is file/div,beforeRouteEnter(to, from, next) {// do someting// 在渲染该组件的对应路由被 confirm 前调用},beforeRouteUpdate(to, from, next) {// do someting// 在当前路由改变但是依然渲染该组件是调用},beforeRouteLeave(to, from ,next) {// do someting// 导航离开该组件的对应路由时被调用}}6.路由跳转导航解析流程当由A路由–B路由的时候
在A组件里调用离开守卫。 A组件中的beforeRouterLeave调用全局的beforeEach守卫。 router.beforeEach再执行B路由配置里调用beforeEnter。
routes:[{path:/b,component:B,beforeEnter:(to,form,next){..... }}]4.再执行B组件的进入守卫。 B组件中beforeRouterEnter 5. 调用全局的beforeResolve守卫(2.5)。 router.beforeResolve 6. 导航被确认。 7. 调用全局的afterEach钩子。 router.afterEach 8. 触发DOM更新。
