vue-router钩子函数和执行顺序

路由钩子函数

1全局路由守卫

一般在main.js中设置全局导航守卫,所有路由都会经过

全局前置守卫beforeEach

全局后置守卫afterEach()

router.beforeEach((to,from,next)=>{

       next() //决定页面是否继续向下走 next(true);

});

2.组件路由守卫

跟 methods: {}等同级别书写，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

beforeRouteEnter (to, from, next) {

          // 注意，在路由进入之前，组件实例还未渲染，所以无法获取 this 实例，只能通过 vm 来访问组件实例

         next(vm => {})

         }

beforeRouteUpdate (to, from, next) {

         // 同一页面，刷新不同数据时调用，

}

beforeRouteLeave (to, from, next) {

         // 离开当前路由页面时调用

}

3.路由独享守卫

router.js（路由页面）中定义 {

        path: "nxp",

        name: 'nxp',

        beforeEnter(to,from,next){ next(); }

}

执行顺序：

1.导航被触发

2.在失活的组件里调用离开守卫

3.调用全局的beforeEach守卫

4.在重用的组件里调用boforeRouteUpdate守卫

5.在路由配置里调用beforeEnter

6.解析异步路由组件

7.在被激活的组件里调用beforeRouteEnter

8.调用全局的beforeResolve守卫

9.导航被确认

10.调用全局的afterEach钩子

11.触发DOM更新

12用创建好的实例调用 beforeRouteEnter 守卫中传给next的回调函数