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

最新推荐文章于 2024-05-17 14:58:10 发布
最新推荐文章于 2024-05-17 14:58:10 发布
阅读量6.4k 收藏 22
点赞数 7
分类专栏： 2021.11.19开始的实习记录本 文章标签： 前端 html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43961652/article/details/122101114
版权

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

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

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

 

 

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

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

最低0.47元/天 解锁文章
巧巧里
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
若依如何实现翻页保留选择？
猿小白的博客
12-22 1318
1、配置checkbox选项field属性为state { field: 'state', checkbox: true }, 2、表格选项options添加rememberSelected rememberSelected: true,
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
若依前端，菜单栏切换时刷新问题 [页面菜单切换时，页面总是重新刷新，导致页面输入的查询参数重载清空]
最新发布
qq_40603125的博客
05-17 757
组件中name、id和菜单中路径保持一致即可，不要写list。
Vue技能点--切换路由时保留页面状态
程序员大阳
01-28 9512
左侧是导航菜单，点击后可以打开多个页面，通过标签切换已打开的页面。 但是切换时，Vue路由默认地会重新加载每个路由页面，现在的需求就是想实现保留每个页面的状态，比如输入的文字，不在切换页面时丢失状态。
路由跳转，返回旧页面保留操作数据。
m0_62099781的博客
05-19 3911
路由跳转到新页面，保存旧页面的查询、分页等数据。
vue 表单切换 数据保存
weixin_46901857的博客
06-05 1323
想要点击不同的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}} .
页面跳转再返回时原有页面数据依然存在
wangatong的博客
02-20 1342
input保留数据
vue2 Keep-alive 详情页返回列表页，保留列表页之前的筛选条件和数据的简单写法
a99101的博客
02-03 1443
keepalive简单对页面保活
若依 ruoyi 默认显示搜索框 保留搜索条件 HeaderSearch/index.vue
test
01-14 1422
若依 ruoyi 默认显示搜索框 保留搜索条件 HeaderSearch/index.vue
vue单页应用在页面刷新时保留状态数据的方法
10-17
今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue主动刷新页面及列表数据删除后的刷新实例
10-18
今天小编就为大家分享一篇vue主动刷新页面及列表数据删除后的刷新实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue + Vue-router 同名路由切换数据不更新的方法
08-28
Vue + Vue-router 同名路由切换数据不更新的方法 在使用 Vue + Vue-router 进行路由切换时，可能会遇到同名路由切换数据不更新的问题。这种情况下，组件可以服用，放在 ready 里获取数据，是不会执行的。这是因为在...
TabBar 控件切换页面数据保留的方法
qq_45057298的博客
08-18 571
在微信小程序中，TabBar 控件切换页面时，默认情况下数据是不会被保留的。使用全局数据：将需要保留的数据存储在 app.js 中的全局数据中，这样无论在哪个页面切换，数据都会保留。使用组件通信：当 TabBar 切换页面时，通过自定义事件或消息订阅机制，将数据传递给目标页面。以上是三种常见的在切换页面时保留数据的方法，你可以根据自己的需求选择一种或多种方式来实现。使用缓存机制：将需要保留的数据通过缓存的方式存储起来，在切换页面时从缓存中读取数据。在需要保留数据的页面中，使用。在切换到页面时，使用。
vue管理后台切换页签缓存查询条件
Dream_Haunting的博客
05-26 896
需求描述 vue管理后台在路由跳转时进行缓存，再次返回该路由还是之前的查询条件 解决方案： 查看了vue-element-admin文档，发现这段话： 由于目前 keep-alive 和 router-view 是强耦合的，而且查看文档和源码不难发现 keep-alive 的 include (opens new window)默认是优先匹配组件的 name ，所以在编写路由 router 和路由对应的 view component 的时候一定要确保 两者的 name 是完全一致的。(切记 name 命名
若依前端，菜单栏切换时刷新问题[页面菜单切换时，页面总是重新刷新，导致页面输入的查询参数重载清空]...
darling331的博客
07-07 2965
前端页面菜单切换时，页面总是重新刷新，导致页面输入的查询参数重载清空 这样切换时，页面就刷新了，解决方法在这里 1，页面代码，这里指定name name: "Item", 注意 name的首字母必须大写 2，页面代码，这里指定id id="item" 注意，id的首字母必须小写 3，页面配置，这里的路由地址必须配置和name一致 Item 重新清除缓存后，再次进入，发现页面就不会重新加载了 ...
uni.navigateBack 返回上一页 刷新上一页数据 调用接口
YUlangML的博客
04-26 5878
//页代码 onShow() { this.getListData(true);//调接口 }, //接口 async getListData(show) { this.isLoading = true; //11111111111111111111111111111111111111111111111111111 //重置数据不然不显示 这是关键 if(show){ this.listData = [] this.
ruoyi页面切换查询条件保留
xieedeni的博客
07-03 2651
ruoyi页面切换时查询条件保留
用cookie实现vue3+vite+elementplus刷新页面，数据保留
07-13
在Vue 3 + Vite + Element Plus中，要实现页面刷新时保留数据，可以借助浏览器的Cookie来存储数据。下面是一个简单的实现步骤： 1. 安装cookie库：在项目中使用`npm`或`yarn`安装`js-cookie`库。 ```bash npm install js-cookie 或 yarn add js-cookie ``` 2. 创建一个`utils`文件夹，然后在该文件夹下创建一个名为`cookie.js`的文件。 3. 在`cookie.js`文件中，引入`js-cookie`库，并创建以下两个方法： ```javascript import Cookies from 'js-cookie'; // 存储数据到Cookie export function setCookie(key, value) { Cookies.set(key, value); } // 从Cookie中读取数据 export function getCookie(key) { return Cookies.get(key); } ``` 4. 在需要保留数据的组件中，例如`Home.vue`，使用`setCookie`方法将数据存储到Cookie中。 ```javascript import { setCookie } from '@/utils/cookie'; export default { mounted() { // 假设要保存的数据是一个对象 const data = { name: 'John', age: 25 }; // 存储数据到Cookie setCookie('data', JSON.stringify(data)); }, }; ``` 5. 在需要恢复数据的组件中，例如`Profile.vue`，使用`getCookie`方法从Cookie中读取数据。 ```javascript import { getCookie } from '@/utils/cookie'; export default { data() { return { data: null, }; }, mounted() { // 从Cookie中读取数据 const cookieData = getCookie('data'); if (cookieData) { this.data = JSON.parse(cookieData); } }, }; ``` 通过上述步骤，你可以在刷新页面后仍然保留数据。当需要存储数据时，使用`setCookie`方法将数据存储到Cookie中；当需要恢复数据时，使用`getCookie`方法从Cookie中读取数据。请注意，Cookie的大小是有限制的，如果存储的数据量较大，可能会超过Cookie的大小限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值