Vue路由守卫之组件内路由守卫
2024-09-05 18:13:57
beforeRouteEnter,进入路由前。需要注意这里不能使用this,因为我们使用的是进入路由之前,那会组件还没创建,得不到this这个属性,所有我们只能使用过vm异步语句来让节点上树;
<script>
export default {
data(){
return{
num : 10
}
},
beforeRouteEnter:(to,from,next)=>{
next(vm=>{
alert(vm.num)
})
},
}
</script>
运行后可以看到,在使用beforeRouteEnter,使用的vm异步语句得到
beforeRouteLeave:离开路由之前可以被调用,可以访问里面的this属性!
<script>
export default {
data(){
return{
num : 10
}
},
beforeRouteLeave (to, from, next) {
if(confirm('确定离开吗?') === true){
next()
}else{
next('aa')
}
}
}
</script>
运行后可以看到,使用beforeRouteLeave(离开路由之前),系统会询问是否要离开,点击取消系统不会跳转,点击确定之后系统才会跳转离开。所以我们可以在离开路由之前做一些事情;
为大家奉上导航守卫完整的解析流程
导航被触发。
在失活的组件里调用离开守卫。
调用全局的
beforeEach
守卫。在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。在路由配置里调用
beforeEnter
。解析异步路由组件。
在被激活的组件里调用
beforeRouteEnter
。调用全局的
beforeResolve
守卫 (2.5+)。导航被确认。
调用全局的
afterEach
钩子。触发 DOM 更新。
用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。
下面为大家附上源码地址 https://gitee.com/web94/vuezujianneiluyou
如果觉得不错请点点手指,关注下我们公众号,我们会长期为您分享前端知识点;
最新文章
- 直接操作 SDL_Overlay YUV叠加上的像素
- 如何使用PL/SQL进行远程数据库连接
- 4Web Service中的几个重要术语
- asp.net web api 测试帮助页面建立并测试
- CLR VIA C#事件
- 101个LINQ示例,包含几乎全部操作
- 巧架个人BT服务器
- 分页技术之PageDataSource类
- How to check a not defined variable in javascript
- BufferedReader的ready与readLine使用,以及Premature EOF异常
- php学习之道:php中soap的使用实例以及生成WSDL文件,提供自己主动生成WSDL文件的类库——SoapDiscovery.class.php类
- Unity 4.5.2 for Mac 下载+安装+破解
- SecureCRT文件传输模式
- Servlet(一)基础总结
- Mybatis第一篇【介绍、快速入门、工作流程】
- xapp1151_Param_CAM模块安装
- 【数学建模】MATLAB语法
- Python You-Get (送你一个免广告的视频和音乐网站 VIP)
- [转帖]Docker save and load镜像保存
- Shiro进行简单的身份验证(二)
热门文章
- vue 混入 mixin,自定义指令,过滤器
- redis数据类型为key的常用命令
- LC 954. Array of Doubled Pairs
- oracle 导出关键字说明
- 1.Oracle 11g 精简客户端
- golang(11) 反射用法详解
- Computed Styles
- 联想H430怎么清除cmos密码?
- Leetcode之动态规划(DP)专题-712. 两个字符串的最小ASCII删除和(Minimum ASCII Delete Sum for Two Strings)
- 【Python开发】python读写文件,和设置文件的字符编码比如utf-8