vue3中beforeRouteEnter 的使用和注意点
beforeRouteEnter 在vue3中的使用
有些时候,我们需要在知道是从哪一个页面过来的。
然后做一些逻辑处理
比如说:从A->B,B页面需要调用接口,回填B页面中的数据
B-->c返回-->B 不需要调用接口,直接读取内存中的值。
这个时候我们就可以使用 beforeRouteEnter 来解决。
beforeRouteEnter:可以知道是从哪一个页面该页面的。
需求描述
从home1进入home2页面,数据从张三变成李四。
从其页面进入,数据仍然是张三
实现功能 01
<template>
<div class=''>
<h2>数据2--{{ obj}}</h2>
</div>
</template>
<script lang='ts'>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup() {
let obj=reactive({
name:'张三',
})
return {obj}
},
beforeRouteEnter(to, from, next) {
console.log(to); //上一个页面前往的的页面(当前页面)
console.log(from);//来自哪一个页面
next((e:any) => {
// 这个回调参数e,包含setup中暴露出去的数据以及内置方法
window.console.log(e)
// 获取是否来自home1页面
if(from.path=='/home1'){
e.obj.name='李四'
}
})
},
})
</script>
需要注意的点
1. 从home1页面进入home2页面。
from.path等于 '/home1'
但是你刷新页面后,from.path可能就不在是'/home1'
可能就是 '/'了
2.当你在home2页面操作的时候,token过期这种情况。
你们的业务逻辑是怎么样的
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步