所有的导航守卫及流程

原创已于 2023-07-18 15:33:13 修改 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-03-21 08:29:45 首次发布

vue 专栏收录该内容

3 篇文章

订阅专栏

文章详细阐述了Vue.js中路由守卫的执行流程，包括beforeEach、beforeEnter、beforeRouterUpdate、beforeRouterLeave等生命周期钩子，以及在路由切换和更新时的不同行为，强调了全局守卫和组件内守卫的使用场景。

// 全局的守卫一定会被执行;全局后置守卫没有next
/*
执行顺序:beforeEach全局前置守卫 -
beforeEnter 路由独享 -
beforeRouterEnter[第一次进入页面的时候，enter是先被触发的]
beforeRouterUpdate【组件内部，使用动态路由切换内容的时候会被触发】
beforeRouterLeave【后面的每一次跳转，leave都是先被触发的】
beforeResolve全局解析守卫 
afterEach 全局后置守卫

当点击切换路由时：beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeCreate-->created-->beforeMount-->mounted-->beforeRouteEnter的next的回调

当路由更新时：beforeRouteUpdate