全局守卫：

需要用过路由对象router进行使用

前置守卫：

在路由发生跳转时最先触发的一定时全局的前置守卫，
在这里插入图片描述

后置守卫：

在路由跳转进入后执行，执行时机在beforeEnter之后且在Vue的beforeCreate之前
在这里插入图片描述

独享守卫(比较少见)

与其他两种路由钩子不同的是它只有一个，而不是一对，需要在路由的routes数组的对应路由对象中进行配置，执行时机在全局前置守卫之后
在这里插入图片描述

组件内的路由守卫

从名字就可以得知它是存在组件当中的，需要在对应的组件中配置。
在进入组件时触发beforeRouteEnter(),执行时机在beforeEnter之后,afterEach之后
在这里插入图片描述

在组件路由地址添加了参数但没有跳转时会触发
在这里插入图片描述

beforeRouteUpdate()，同时在组件复用也会触发
在离开组件时触发beforeRouteLeave(),执行时机在离开组件时立即触发
在这里插入图片描述

注意：路由中有next的一定要执行next()才会跳转到页面，如果没有执行next()的话会导致页面无法跳转到相应页面，会出现白屏的情况

路由与Vue钩子顺序

路由发生跳转
beforeEach—>beforeEnter—>beforeRouteEnter—>afterEach—>beforeCreate—>created—>beforeMount—>mounted–vue的数据发生改变–>beforeUpdate—>Updated–离开当前组件–>beforeRouterLeave—>
跳转到第二个组件的顺序，注意，此时第一个组件的beforedestroy还没有销毁
beforeEach—>beforeEnter—>beforeRouteEnter—>afterEach—>beforeCreate—>created—>beforeMount—>第一个组件的beforeDestory—>第一个组件的destoryed—>mounted–vue的数据发生改变–>beforeUpdate—>Updated–离开当前组件–>beforeRouterLeave—>…

不足之处请多多指教…

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue