vue框架是传参前进刷新，后退不刷新

最新推荐文章于 2025-05-14 10:53:57 发布
最新推荐文章于 2025-05-14 10:53:57 发布
阅读量344 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42423062/article/details/89057781
本文探讨了在Vue框架中利用query方式进行参数传递的方法，解决了页面刷新导致数据丢失的问题，适用于需要保持状态的场景。

#使用vue框架是前进刷新，后退不刷新
一般情况下都会是用params 进行参数传递。但是params是页面刷新后数据会消失。所以我使用query传参，页面刷新，值不刷新，这样有利于保存不需要页面刷新改变的值
在这里插入图片描述
接收
在这里插入图片描述

小海龟hy
关注
前端开发：vue-router的使用以及两种模式的区别
全沾软贱开发攻城狮
05-01 1万+
前言 在前端开发中，使用Vue做项目的时候关于路由的管理处理是非常重要的知识点，路由的管理也是比较常用的，做前端开发的都知道SPA，通过唯一一个HTML页面完成所有组件的展示和切换，不同组件之间的切换需要通过路由来实现。vue-router是Vue的官方路由插件，为的就是Vue单页面开发的路由，处理页面跳转的，那么本篇博文就来分享一下关于vue-router相关的知识点，该知识点在前端求职面试中也是高频考察知识点，这里总结一下，方便查阅使用。 vue-router概念 　router的中文释...
Vue3全家桶入门 （通过vue-cli脚手架搭建todolist项目环境，深入vue3.0核心知识）
qq_49900295的博客
05-15 3371
todolist项目准备 vue3.0环境搭建 进入想要的目录路径：vue create todolist 选择select features，点击回车 上下键移动按空格选择，一定不要按回车，这样就进入下一步了 我们按空格选择Router和vuex和下面的css预处理器，我们暂时先把Linter这个关闭掉 我们选择3.x的版本，按回车 路由是否选择history模式，写Y按回车 这一步选择css预处理器，我就选择一个less 配置项就选择它默认的配置项 ..
vue项目实现前进刷新后退不刷新
07-02
此项目代码包括3种（大同小异的）方式实现页面数据的前进刷新后退不刷新的功能，分别可以参考页面的2、3、4代码的实现，欢迎有问题及时反映
vue实现前进刷新后退不刷新效果
01-21
最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a->b->c 前进（b,c）刷新，c->b->a 后退（b,a）不刷新。 由于 keep-alive 会把所有加载的过的界面都缓存起来，没法实现返回时将界面销毁掉，导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候，调用 this.$destroy(true) 来将界面销毁掉。但是在移动端 android设备上会有物理返回键，如果通过物理返回键返回的话，就没法处理了。虽然可以重写android的返回
Vue 实现前进刷新，后退不刷新的效果
分享我的编程经验和学习心得
06-07 206
需求一： 在一个列表页中，第一次进入的时候，请求获取数据。 点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。 也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。 解决方案 在 App.vue设置： <keep-alive include="list"> <router-view/> ...
vue中实现传数据不跳转页面_【必看】58道Vue常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...
weixin_39869693的博客
11-20 1082
(给前端日刊加星标，提升前端技能)作者：Lucky Girlhttps://zhuanlan.zhihu.com/p/924076281.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react...
VueRouter路由与Vuex状态管理
炑焽的博客
06-09 1167
本章节将深入探讨Vue3中的路由与状态管理，涵盖路由的基本概念、实现原理、搭建与配置、动态与编程式路由、命名路由与视图、路由守卫等关键内容，以及Vuex和Pinia等状态管理库的基本使用、异步处理、计算属性和辅助函数的应用，还包括Vuex-persist数据持久化、模块分割和多状态管理等高级话题。此外，还将探讨在组合式API中如何使用Router和Vuex，并通过一个综合案例来加深理解。
vue前端项目--路由vue-router
As_Yua的博客
08-07 1054
早期的网站开发中，服务器负责生成完整的 HTML 页面，并将其发送给客户端展示。每个 URL 对应一个特定的控制器(Controller)，该控制器负责处理请求并生成相应的 HTML 内容。这种方式有利于搜索引擎优化（SEO），因为搜索引擎可以轻松抓取完整的 HTML 内容。缺点是页面更新时需要重新加载整个页面，导致用户体验不佳，且 HTML 和业务逻辑混杂在一起，难以维护。随着 Ajax 技术的出现，前后端分离成为可能。
3种vue路由传参的基本模式
12-28
路由是连接各个页面的桥梁，而参数在其中扮演者异常重要的角色，在一定意义上，决定着两座桥梁是否能够连接成功。 在vue路由中，支持3中传参方式。 场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取对应li的数据，显示相应的正确的内容。 父组件中： <li v-for=article click=getDescribe(article.id)> 方案一： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/
vue单页面，多路由，前进刷新，后退不刷新
bihansheng2010的博客
03-30 690
注：demo中，index页面包含三个链接导航。page1-->page2-->page3.依次前进，每次前进到一个新页面都需要获取数据，而按下后退键后，从page3返回到page2，page2不再获取新数据，而是使用之前缓存的数据。从page2返回到page1时，page1不再获取新数据，而是使用之前的数据。所以，page1和page2需要缓存，page3不需要缓存。可以把page1...
vue前进刷新后退不刷新
qq_38317380的博客
03-21 1302
vue前进刷新后退不刷新
vue前进刷新，后退不刷新
蛋蛋老公的博客
05-14 429
1、在app.vue界面设置keep-alive <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
vue实现前进刷新，后退不刷新
热门推荐
zuo-yiran的博客
07-02 1万+
项目中遇到可以有多个入口进入一个页面a，在a页面要调不通的接口进行判断所带过来的信息，可在mounted里面进行判断，此页面还有二级页面可以选择数据，那么就要求从二级页面退回页面a时，不走mounted里面的方法重新调取数据，不然会覆盖掉二级页面带回来的数据，所以就需要进入页面a时进行数据刷新，但是退回到页面a时，则不刷新该数据。 说明：例子为从页面2进入页面3时，调用接口，并把数据存到vuex...
vue2前进刷新后退不刷新
最新发布
anyong3的专栏
05-14 266
网上关于前进刷新后退不刷新的代码很多，但是在项目里面都用不起来，感觉没办法真正实现该功能。我这边简单粗暴的监听window的popstate事件搞定。然后app.vue中将需要缓存的组件用keepAlive包裹，include的列表指向store里面的缓存对象。接下来在main.js中做好前进加入缓存列表后退删除缓存列表的操作即可。目前应付手机h5应用中没有太多复杂跳转的简单页面是够了。首先在store里面定义好缓存相关的对象和操作。
Vue.js实现前进刷新后退不刷新（简洁版）
longyvfengyun的博客
10-13 1722
一、内容概要 以前写过一篇Vue.js单页应用实现前进刷新后退不刷新博客，但在实际的使用的中感觉配置很麻烦，因此查阅资料和阅读他人博客，总结出一套较为简洁的实现方案。 二、方案思路 1.后退不刷新肯定要使用keep-alive 2.前进刷新，有两种情况一种就是进入的页面从未打开过（不用考虑，肯定会刷新），一种是进入的页面已经被打开过，由于使用了keep-alive，如果不做任何处理，进入的页面肯定是不刷新的，还是上一次进入的状态。那么如果被打开过的页面被销毁，再次进入会不会刷新呢？答案是可定的会刷新，因为内
vue-router传参攻略：刷新不丢失的正确姿势
"详解新手使用vue-router传参时注意事项，主要介绍了通过name和params以及path和query两种方式在vue-router中传递参数，并提到了参数丢失和类型转换的问题及解决方案。" 在Vue.js应用中，vue-router是官方推荐的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值