Vue跳转到新页面再返回到旧页面保持状态不变的问题
更新时间：2025年04月28日 14:32:32 作者：zhaocarbon
这篇文章主要介绍了Vue跳转到新页面再返回到旧页面保持状态不变的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue跳转到新页面再返回到旧页面保持状态不变
新项目中遇到了A页面跳转到B页面用户填写并收集数据相关数据成功返回到A页面时，A页面被重置刷新，所有已经填写的其他数据均没了的问题，为了解决这个问题，我们不得不使用以下方案解决问题：
页面路由如下：
- A页面：path: '/project/add',
- B页面：path: '/project/researchGroup',
解决方案：使用keep-alive
1.在vue.app中添加keep-alive标签
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>2.在router文件下的index.js中添加meta节点并新增keepAlive:true
3.在B页面中添加
搞定！！飞起！！
当然因为B页面有可能还有其他子级页面等，根据根据相应的逻辑完善这块儿的逻辑即可！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue之表单事件的数据绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助2021-11-11
这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
大部分中文应用弹出的默认键盘是简体中文输入法键盘,在输入用户名和密码的时候,如果使用简体中文输入法键盘,用户的输入记录会被缓存下来所以我们需要一个安全键盘,本文给大家介绍了如何基于vue封装一个安全键盘组件,需要的朋友可以参考下2023-12-12
Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法
getCurrentInstance方法用于获取当前组件实例,仅在setup和生命周期中起作用,下面这篇文章主要给大家介绍了关于Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了详解Vue路由自动注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue中post请求报400的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue使用video插件vue-video-player的示例
这篇文章主要介绍了vue使用video插件vue-video-player的示例，帮助大家更好的理解和使用vue插件，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了Vue Element-ui 键盘事件失效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了vue3安装vant实现按需引入和全局引入，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了浅谈vue 单文件探索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论