vue-router 有哪几种导航守卫?

全局守卫路由独享守卫路由组件内的守卫全局守卫vue-router全局有三个守卫router.beforeEach 全局前置守卫进入路由之前router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用router.afterEach 全局后置钩子进入路由之后路由独享守卫如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫路由组件内的守

LuckXinXin

3546人浏览 · 2020-09-20 19:59:23

LuckXinXin · 2020-09-20 19:59:23 发布

全局守卫
路由独享守卫
路由组件内的守卫

全局守卫

vue-router全局有三个守卫

router.beforeEach 全局前置守卫进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子进入路由之后

在这里插入图片描述

路由独享守卫

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫

在这里插入图片描述

路由组件内的守卫

beforeRouteEnter 进入路由前, 在路由独享守卫后调用不能获取组件实例 this，组件实例还没被创建
beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用可以访问组件实例 this
beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this

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}$/, //不连续的两位字母// /^