最近在开发Vue应用时,发现Vue Router在2022年8月22日的更新后,使用param传参在新页面无法获取数据,刷新URL后参数丢失等问题。于是,我决定尝试使用History API来实现参数传递,效果相当不错。
通过使用History API,可以在不刷新页面的情况下,将参数传递给新页面。这种方法不仅避免了刷新URL丢失参数的问题,还能在用户浏览不同页面时保持参数的连续性。
接下来就是具体的示例代码:
在pagea.vue中传递参数:
router.push({
name: '/console/list/edit',
state: { code: code },})
在pageb.vue文件中:
onMounted(()=>{
//获取history中保存的参数code.value = history.state.code
})
在实际开发中,无论是网站开发、系统开发还是app定制开发,使用History API都能带来更好的用户体验。例如,在网页设计中,可以通过History API实现页面间的参数传递,而在小程序开发中,也可以利用这种方式来实现页面间的数据共享。
总的来说,使用History API传参是一种更加灵活和可靠的方式,值得在开发中广泛应用。
全部评论