vue中的导航守卫

vue中的导航守卫（大家有什么问题或者我说的不对可以给我纠正，谢谢）

当我们这个页面有很重要是事情需要完成的时候，有时候会碰到别的按钮，则会消失，对我们的页面和用户体验不佳，则我们需要导航守卫来问候一下是否需要离开此页面。

beforeRouteLeave(to,from,next){} 当页面需要离开时问候

beforeRouteEnter(to,from,next){} 当页面进去时问候

则 to 为去哪 ， from为从哪来。next执行。

// 离开这路由
    beforeRouteLeave (to, from, next) {
        // to 去哪 from从哪去  next执行。 this为undefined
        const result = window.confirm("你确定要离开我吗？");
        if(result){
            next();
        }else{
            return;
        }
    },
    // 进入这路由  this为undefined
    beforeRouteEnter (to, from, next) {
        const result = window.confirm('个人中心已恭候多时！请进')
        if(result){
            next(vm => {
                console.log(vm)
            });
        }else{
            return;
        }
    }

重要

全局守卫 （在main里面使用，守卫整体）

• router.beforeEach 守卫每一个路径
• router.beforeResolve 路由加载完成执行
• afterEach 路由解析完成执行。

路由独享守卫（在router里面使用，只能守卫一个路径）

• beforeEnter

组件内守卫（在组件内部使用）

• beforeRouteLeave 当离开这个路径时执行 Personal.vue用到
• beforeRouteEnter 路由将要进来。
• beforeRouteUpdate mounted 动态路由用到 Question.vue用到
• to from next

beforeRouterLeave 和 beforRouteUpdate 的区别？
beforeRouterLeave切换路由，不使用现在的组件了。
beforeRouterUpdate切换路由，但是还使用这这个组件。

全局守卫和独享守卫和组件守卫执行顺序

• beforeEach -> beforeEnter -> beforeRouteEnter -> beforeResolve -> afterEach

1。完整的导航解析流程

• 导航被触发。
• 在失活的组件里调用离开守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认。
• 调用全局的 afterEach 钩子。
• 触发 DOM 更新。
• 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

动态路由（）

• /question/:id 动态路由 Academic question用到。
• this.$route.params.xxx 匹配拿到路由的值
• this.$route.query.xxx 只是通过问号去传递