全局路由导航守卫：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()注册过的回调。
