全局路由导航守卫:beforEach afterEach
路由独享导航守卫:beforEnter
组件内导航: beforRouteEnter beforeRouteUpdate beforeRouteLeave
beforEach 与 beforEnter 的区别:前置针对所有路由,后者针对当前路由
切换界面时,从 test界面 到 about界面。
【组件】前一个组件的beforeRouteLeave
【全局】beforeEach
【组件】(路由参数发生变化)触发beforRouterUpdate
【配置文件,即router.js文件中写在路由配置的地方】beforEnter
【组件】组件内部声明的beforeRouteEnter
【全局】afterEach
{ path: '/list', name: 'list', component: () => import('@views/List'), children: [ { path: ':id', name: 'details', component: () => import('@views/Details'), props: true, beforeEnter: (to, from, next) => { console.log('路由独享守卫 beforeEnter') next() } } ] }
beforeRouteEnter(to,form,next){ console.log(this)//访问不到this next(vm=>{ console.log(vm)//vm为vue实例,此时vm为this }) } beforeRouteUpdate(to,form,next){ next() } beforeRouteLeave(to,form,next){ next() }
next()详解
- next()
没有参数,表示可以进入到to的路由中;
- next(false)
参数为一个布尔值false,中断当前的导航,回到from路由;
- next(’/’) 或 next({ path: ‘/’ })
参数为一个路径,相当于执行了this.$router.push(’/’)
- next(error)
参数为error,中断当前导航,将该错误传递给router.onError()注册过的回调。