vue2+若依+页面切换刷新回来后保留数据

最新推荐文章于 2025-03-11 15:45:35 发布
最新推荐文章于 2025-03-11 15:45:35 发布
阅读量7.2k 收藏 22
点赞数 7
分类专栏： 2021.11.19开始的实习记录本 文章标签： 前端 html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43961652/article/details/122101114
版权
本文介绍了如何在Vue2和若依框架中利用Vuex保存页面切换时的搜索条件，避免刷新后数据丢失。通过创建Vuex模块、暴露store以及在组件生命周期中操作数据，成功实现页面间数据持久化。同时，文章提到在清空功能中也需要考虑保存状态，并指出JSON.stringify()方法在判断对象为空时可能存在的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如题 现有两个页面，接单页面和订单详情页面。接单页面有一个查询弹窗。

1、默认将客服设置成当前登录的人员，并只展示出该客服负责的订单

2、重新设置了搜索条件，进入订单详情页面再回来，页面会刷新，搜索条件也会被重置，希望不要重置搜索条件而是进行保留

 

 

 讲道理，昨天第一个需求提出来的时候我可以把它给实现了，第二个需求提出来的时候我愣是傻了，单以为只要切换页面就必定会刷新页面，搜索条件必重置，做不了

今天上午来，又看了一遍需求，突然想到为什么我第一个需求可以用vuex写出来，第二个为啥不能

于是看了一下若依框架里的vuex代码，把功能实现出来了，和原生的vue用法基本一致。

一、写vuex

src->store->modules里新建一个search.js（因为有两个页面需要完成这个功能，所以写了两个state）


                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    


                



	

		

			

				
					
若依ruoyi-vue前端页签缓存设置

				
			

			

				

					字节叔叔
				

				

					04-24
					
					4684
					
				

			

		

		

			
				
在路由配置中，为需要缓存的路由设置。

			
		

	



                

            
              



	

		

			

				
					
【若依前后端分离】表格勾选状态换页不消失

				
			

			

				

					敲厉害的燕宝的博客
				

				

					04-08
					
					1029
					
				

			

		

		

			
				
这意味着，如果用户在表格中选择了某些行，并且后续数据更新或重新加载后，如果之前选中的行仍然存在于新的数据中，那么这些行将保持选中状态。这样做有助于提供更好的用户体验，避免用户在数据更新后需要重新选择之前已选中的行。在el-table中添加ref="detailRef" :row-key="getRowKeys"在el-table-column中添加:reserve-selection="true"在el-table中添加@row-click="handleRowClick"组件时的一个属性设置。

			
		

	



              


  
              

                


	

		

			

				
					
在vue3若依后台框架中，实现点击页签不自动刷新页面的问题

					
最新发布

				
			

			

				

					I_Allen_Liu的博客
				

				

					03-11
					
					346
					
				

			

		

		

			
				
遇到一个工作需求，当点击管理系统顶部不同的页签时，实现页面保留之前的内容，不刷新。

			
		

	





	

		

			

				
					
ruoyi页面切换查询条件保留

				
			

			

				

					xieedeni的博客
				

				

					07-03
					
					4024
					
				

			

		

		

			
				
ruoyi页面切换时查询条件保留

			
		

	



		

			
		



	

		

			

				
					
vue2页面切换刷新回来后保留搜索条件数据

				
			

			

				

					梦雨的博客
				

				

					08-18
					
					1588
					
				

			

		

		

			
				
最近遇到这样一个需求当我们用户在列表中通过搜索条件查询出来的list然后点击进入详情页后返回list页面要求保留上次查询条件的数据，不重置数据，当时我就想当到了使用vuex来存储用户的查询条件数据，然后进行回显处理。

			
		

	





	

		

			

				
					
若依框架切换菜单 已打开的菜单其内容保持不变的方法

				
			

			

				

					木森林的博客
				

				

					03-04
					
					543
					
				

			

		

		

			
				
若依框架切换菜单 已打开的菜单其内容保持不变的方法 vue + springBoot

			
		

	





	

		

			

				
					
关于若依框架页面跳转但内容不变的问题

				
			

			

				

					jtjeeeee的博客
				

				

					07-04
					
					1347
					
				

			

		

		

			
				
一，问题：
我点击一个按钮跳转到一个页面，数据显示的很正常，
但是当我点击另一个按钮（url基本相同，只是传参不同）
结果成功跳转到那个页面但是数据还是上一次访问时的数据二，解决试了不少也找了不少，但是还是这个靠谱：解决vue页面跳转不刷新问题_hicfly的博客-CSDN博客_vue 页面不刷新三，拓展watch：监测 Vue 实例变化的一个表达式或方法。作用：可以监控一个值的变换，并调用因为变化需要执行的方法。$route是用来获取当前路由的一些信息的，比如传的参数
至于to与from两个参数一个指的是

			
		

	





	

		

			

				
					
Vue切换组件实现返回后不重置数据,保留历史设置操作

				
			

			

				

					10-15
				

			

		

		

			
				
通过结合使用`<keep-alive>`和`localStorage`，我们可以有效地在Vue中实现组件切换后的数据保留以及页面刷新或跳转时的数据恢复。这种方式极大地提升了用户体验，让用户在多次访问或操作后仍然能找回他们之前的状态...

			
		

	





	

		

			

				
					
Vue 路由切换时页面内容没有重新加载的解决方法

				
			

			

				

					12-29
				

			

		

		

			
				
第二次进入页面，页面路由参数已经改变，但是页面内容...keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了。 解决办法： 使用Vue组件切换过程钩子activated(ke

			
		

	





	

		

			

				
					
切换Tab页面不重复刷新页面/请求数据问题

				
			

			

				

					m0_50298323的博客
				

				

					10-27
					
					7140
					
				

			

		

		

			
				
切换Tab页面不重复刷新页面/请求数据问题

			
		

	





	

		

			

				
					
vue 路由嵌入iframe 刷新保留当前页面

				
			

			

				

					白大美的程序日志
				

				

					04-20
					
					3930
					
				

			

		

		

			
				
最近在研发过程中，遇到了一个优化，vue项目嵌套在另外一个vue项目的iframe中，外层vue的iframe刷新，iframe中的vue项目希望可以停留在你当前操作的页面，而不是刷回到一开始的iframe里src路径

当开始听到这个优化点的时候，一上来有点懵，初步想法是存在localstroage里面，每次页面刷新的时候，去缓存里面取值，然后在push

但是这样操作有问题，localstro...

			
		

	





	

		

			

				
					
路由跳转，返回旧页面保留操作数据。

				
			

			

				

					m0_62099781的博客
				

				

					05-19
					
					4446
					
				

			

		

		

			
				
路由跳转到新页面，保存旧页面的查询、分页等数据。

			
		

	





	

		

			

				
					
若依前端，菜单栏切换时刷新问题 [页面菜单切换时，页面总是重新刷新，导致页面输入的查询参数重载清空]

				
			

			

				

					qq_40603125的博客
				

				

					05-17
					
					2927
					
				

			

		

		

			
				
组件中name、id和菜单中路径保持一致即可，不要写list。

			
		

	





	

		

			

				
					
vue 表单切换 数据保存

				
			

			

				

					weixin_46901857的博客
				

				

					06-05
					
					1442
					
				

			

		

		

			
				
想要点击不同的tab切换提交信息，然后点击回到对应的tab是保存记录
<div class="btn_list">
//这个是循环上边的tab切换
                <span :class="['genre',now == item.id ? 'cur' : '']" v-for="(item,index) in CarClassIf" :key="item.id" @click="changHan(item,index)" >{{item.name}}
     .

			
		

	





	

		

			

				
					
vue tab切换保持数据状态

				
			

			

				

					m0_37697423的博客
				

				

					06-24
					
					9255
					
				

			

		

		

			
				
页面做tab切换，由于组件每一次切换都会重新实例化组件，我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新，减少页面重新渲染以及减少请求
实现方法：使用<keep-alive></keep-alive>包裹组件


<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-p...

			
		

	





	

		

			

				
					
【VUE】若依vue切换tab页签时页面保持不重新加载

					
热门推荐

				
			

			

				

					SZnAl的博客
				

				

					08-03
					
					1万+
					
				

			

		

		

			
				
页面板块打开后，切换Tab栏各页面，页面不重新加载，保持原样，提高用户体验

			
		

	





	

		

			

				
					
怎么样实现跳转页面后，点击返回，仍然保留表格原来的筛选条件？

				
			

			

				

					github
				

				

					07-17
					
					5760
					
				

			

		

		

			
				
跳转页面后点击返回，仍然保留表格的筛选条件：搜索值、页码、每页几条1.需求说明2.实现的步骤
1.需求说明

操作表格数据后，点击返回后仍然保留原来的查询条件

页面中有搜索框、表格、分页 3 个组件
表格每条数据有操作列，例如：点击 详情，就会跳转到另一个页面
表格数据筛选条件为：搜索值 + 当前页码 + 每页几条数据


它大概长这样：

2.实现的步骤


该页面创造时从 sessionStorage 中读取先前保存的 筛选条件
如果该 筛选条件 存在就把它取出来，作为查询条件
该页面被销毁前保留 筛

			
		

	





	

		

			

				
					
若依框架顶部菜单切换，路由跳转，数据不刷新问题

				
			

			

				

					PolarisWay的博客
				

				

					07-17
					
					974
					
				

			

		

		

			
				
若依框架顶部菜单切换，路由跳转，数据不刷新问题

			
		

	





	

		

			

				
					
页面跳转再返回时原有页面数据依然存在

				
			

			

				

					wangatong的博客
				

				

					02-20
					
					1677
					
				

			

		

		

			
				
input保留数据

			
		

	





	

		

			

				
					
vue keep-alive缓存个别页面

				
			

			

				

					02-18
				

			

		

		

			
				
### 使用 Vue 的 `keep-alive` 组件缓存特定页面

#### 配置 `keep-alive` 实现高效组件管理

为了提高单页应用程序(SPA)中的性能并减少不必要的重新渲染，Vue 提供了 `<keep-alive>` 标签用于包裹动态组件，在组件切换时自动保存进入缓存的状态。当再次访问被缓存的视图时，可以快速恢复之前的状态而不必重新加载整个组件实例。

针对仅需缓存部分而非全部子路由的情况，可以通过设置 `include` 或者 `exclude` 属性来精确控制哪些组件应该被保留于内存之中[^1]：

```html
<keep-alive :include="['listPage']">
  <router-view></router-view>
</keep-alive>
```

上述代码片段展示了如何利用 `include` 参数指定名称为 `'listPage'` 的组件作为唯一允许缓存的对象；而其他未提及的名字则不会受到此标签的影响，每次导航至这些路径都会创建新的实例[^2]。

#### 动态调整缓存策略适应不同需求

除了静态定义外，还可以通过绑定属性的方式使缓存名单变得灵活多变。例如依据当前用户的操作习惯或是业务逻辑的变化实时增删项名，从而达到更精细化的操作效果:

```javascript
data() {
  return {
    cachedPages: ['home', 'about']
  }
}
// ...
<keep-alive :include="cachedPages">
  <!-- ... -->
</keep-alive>
```

这种方法使得开发者能够在运行期间根据实际情况修改要保持活动状态的具体范围，增强了灵活性的同时也提高了资源利用率[^3]。

#### 处理缓存带来的副作用

值得注意的是，启用 `keep-alive` 后可能会遇到一些意想不到的问题，比如某些情况下即使离开了某个页面再回来其内部的数据也没有刷新等问题。为了避免这种情况发生，可以在激活钩子里手动触发数据获取动作，确保显示的内容是最新的版本[^4]:

```javascript
activated() {
  this.fetchData();
},
deactivated() {
  console.log('Component deactivated');
}
```

以上就是在 Vue.js 中运用 `keep-alive` 来优化 SPA 性能以及解决潜在问题的一些最佳实践建议。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值