vue3 页面跳转 页面数据保留

已于 2023-07-27 17:07:44 修改
阅读量1.8k 收藏 4
点赞数
文章标签： 前端 vue
于 2023-07-27 16:39:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45118325/article/details/131963370
版权

vue3实现页面跳转后再跳转回来页面数据保留

1.自定义需要保留的数据

2.在路由导航中，使用route.fullPath（当前页面的路径）和route.query（查询参数）作为key，将页面要保留的数据存入localStorage中

PS：钩子函数中的三个参数分别表示为：

        to：要去的页面     from：本页面地址     next：下一步

3.页面加载时，从localStorage中获取数据 

不将就__
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html实现vue回退不刷新，保存原有数据
11-06
a页面跳转到b页面，b页面点击浏览器回退，回退到a页面，a页面的数据都是跳转前的数据，数据没有发生变化
解决vue单页使用keep-alive页面返回不刷新的问题
12-29
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用<keep>解决这个问题，下面是我的使用心得。 <keep>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方 <router></router> 把这段代码改成如下： <keep> <router v-if=$route.meta.keepAlive></route
【vue3+ts】keep-alive缓存组件，路由跳转后，返回旧的页面依旧保留之前的数据及浏览位置。
lwc18639470699的博客
01-26 984
此时还会出现一个问题，就是当我在首页浏览到一定位置后，点击“更多”，路由跳转到列表页面的位置和首页的位置一样。上面一段是官网的解释。简单理解就是缓存组件的，不加它每次访问组件都会重新创建，重新创建也就意味着数据初始化，路由跳转走之后就会摧毁。我的场景是在首页有个点击‘更多’来路由跳转到列表页面。当我从列表页返回到首页时，页面重新刷新了。因为 <Transition>包裹组件的原因，组件内必须只有一个跟节点。包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。这样返回到首页时显示的就是之前的页面效果啦。
Vue + element 多选表格实现跨分页保存数据并回显
clearjj的博客
03-17 2620
在大部分项目中如果存在数据的处理操作一般会有这样一个需求：多选表格因为数据太多，全选按钮需要从默认的全选当前页变为全选所有数据，并且每页记录的数据需要切换分页的时候保存下来并在切回分页的时候进行回显，这个时候我们就需要对 element ui 的表格进行一些处理 elment ui 的 table 表格本身带了一个跨页保存数据的属性 也就是说 row-key 配合 reserve-selection 是可以进行数据的保存的，我们可以通过请求到的数据和存储的跨页数据进行匹配做到回显不成问题，但是在我个
Vue-Router实现带参数跳转，并且保存原页面数据记录
weixin_61933613的博客
03-07 699
摘要：Vue项目中有个小需求，从A页面带多个参数跳转到B页面，B页面使用出入参数查询并显示，同时再次切换到A页面时依然记忆原有的数据。
vue2.0 keep-alive 路由跳转之后保留当前页面数据不变动
hyduan_h5的博客
05-27 4133
需求： 1：页面一数据由接口返回，修改部分数据， 2：数据仅前端页面调整，暂未提交修改数据库。 3：页面一跳转页面二，再由页面二返回页面一 4：页面一数据仍为修改后的数据 实现： 1：借用方式：keep-alive 2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染 一：在vue.app中添加keep-alive标签。 <template> <div id="app"> <keep-al.
vue单页面实现路由跳转后保留原页面数据
热门推荐
weixin_51958039的博客
10-24 1万+
在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数。2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性，用来标示页面是否是从详情页面返回的。该步骤可以让一个组件里的值传到另一个组件里，不需要父子关系。页面的缓存，需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
Vue切换组件实现返回后不重置数据,保留历史设置操作
10-15
主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录
害。代码嘛，可不就是敲着玩！
08-09 4311
vue项目实现路由跳转到新页面，返回旧页面，保留之前的数据记录
Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)
qq_66953312的博客
07-07 3493
Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)
Vue返回上一页保留数据
KevinMiGuan的博客
03-09 7488
1.配置路由，代码如下 export default new Router({ routes: [ { path: '/hello', name: 'HelloWorld', component: HelloWorld, meta: { keepAlive: true // 需要缓存 } }, { path: '/hello2', name: 'HelloWorld2',
vue解决浏览器中跳转新页面缓存上一页表单等内容方法
qq_35946021的博客
06-06 5359
在工作中，有可能会遇到需要缓存页面或组件的功能。：比如在h5中有个一个50个表单，在填到第40个表单时，需要你去另一个新页面去选择列表项，然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个表单内容不被重置。此功能在微信小程序是可以做到的，微信小程序返回上一页内容的话，onshow以前的生命周期的不会调用的，所以表单是会被保留的。但是vue生命周期和微信小程序不一样。如果跳转某个页面或返回上一页都是不被缓存的。我们可以使用 keepAlive 来缓存当前页面或组件。
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
01-19
需求分析 背景： 1.数据列表页，滚动加载数据； 2.多条数据情况下，点击某一条，进入详细页进行编辑（修改，删除）操作； 3.保存返回上一页； 在上面的情况下，想要保持在上次浏览位置，并且保持数据是最新的； 解决办法 1.原始的办法：在点击详情页的时候，记住浏览位置，传递参数或者存到本地缓存，然后在详情页操作完毕后，返回的时候，路由守卫可以判断，是否详情页跳转回来的，然后让页面滚动到上次记录的位置； 思路是这样，实际操作很麻烦； 2.推荐办法：使用vue动态组件keep-alive,搭配路由守卫函数beforeRouteLeave，以及activated钩子函数； 对于钩子函数执行顺序，以及作
vue 实现tab切换保持数据状态
12-28
页面做tab切换，由于组件每一次切换都会重新实例化组件，我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新，减少页面重新渲染以及减少请求 实现方法：使用<keep></keep>包裹组件 <el v-model=activeName tab-click=handleClick> <el label=记录> <keep> <child1 v-if=isChildUpdate></child1> </keep> </el> </el> 列表页面跳转详情 ，
vue单页面实现当前页面刷新或跳转时提示保存
10-17
主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 272
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 557
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
前端调用WebSocket协议接口获取数据
最新发布
m0_56023096的博客
04-29 264
createWs("测试数据", (res) => {
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 1068
XYCTF 2024 Web 方向全解
vue3 页面跳转保存数据
08-15
在 Vue 3 中，你可以使用路由导航守卫来在页面跳转时保存数据。下面是一个简单的示例： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ // 定义你的路由 ], }); // 在路由导航前保存数据 router.beforeEach((to, from, next) => { // 在这里保存你需要的数据 // 例如，你可以使用 Vuex 来存储数据或发送数据到后端进行保存 next(); }); export default router; ``` 在上面的代码中，我们使用 `beforeEach` 导航守卫来在每次路由跳转前执行一段代码。你可以在这个导航守卫里面保存你需要的数据，例如使用 Vuex 或者发送数据到后端进行保存。 请注意，这只是一个简单的示例，具体实现根据你的项目需求可能会有所不同。你需要根据你的具体情况来确定如何保存和处理数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值