[toc] ## 路由守卫函数会帮助我们监控整个路由的切换 ，我们必须调用`next()`才能进入路由的下一个阶段 ## router上的三个路由守卫函数 `router`是`new Router()`出来的示例 ### beforeEach ``` router.beforeEach((to, from, next) => { console.log('beforeEach invoked'); if(to.fullPath.startsWith('/app')){ //调用next才会进行跳转 //不要跳转到自己,会infinite loop // next('/login'); next('/login'); //不仅可以写字符串，也可以写一个object，传入的和router-link上声明的东西是一样的 next({path:'/login',replace:true}) }else{ next(); } next(); }); ``` ### beforeResolve beforeEach->beforeEnter->beforeRouteEnter都触发后才会触发 ``` router.beforeResolve((to, from, next) => { console.log('beforeResolve invoked'); next(); }); ``` ### afterEach ``` router.afterEach((to, from) => { //无需next，路由已经跳转 console.log('afterEach invoked'); }); ``` ## beforeEnter：每条路由进入前各自的路由守卫函数 会在router.beforeEach之后，router.beforeResolve之前调用 ``` , beforeEnter(to, from, next) { console.log('app route before enter'); next(); } ``` ## 组件内部的路由守卫函数 已确定要进入 组件所在路由 时触发的路由守卫函数 ### beforeRouteEnte ``` //在route的beforeEnter触发后才会触发beforeRouteEnter // enter和update不会同时触发！！ beforeRouteEnter(to,from,next){ console.log('todo before enter'); }, ``` 需要注意的是路由守卫函数中并**不能**直接拿到组件的**this** 想要获取组件的实例需要，在路由守卫函数中调用next时使用函数传参 ``` //vm为todo被创建好后的this对象 //id为通过路由配置的props属性注入 next(vm=>{ console.log('after enter this.id is',vm.id) }) ``` ### beforeRouteUpdate 同一个组件在不同的路由下面都是由这个组件显示的时候才会触发 >case1:如果是同一路由下 > 比如说动态路由 /app/:id 动态路由参数不同时会触发 注意 如果从/app/3 切换到 /other 再切换到/app/4 是不会触发的 >case2:使用命名视图 ``` beforeRouteUpdate(to,from,next){ console.log('todo before update'); next(); }, ``` >[danger] 需要注意的是组件的update和enter路由守卫函数一定不会同时触发 > ### beforeRouteLeave 切换路由时最先触发的守卫函数，后面是beforeEach 一般用于一不小心要离开时点击确认 ``` beforeRouteLeave(to,from,next){ console.log('todo before leave'); next(); }, ```