Vue如何做到前进刷新数据,后退不刷新数据呢?

最新推荐文章于 2024-07-08 11:41:14 发布
最新推荐文章于 2024-07-08 11:41:14 发布
阅读量6.2k 收藏 2
点赞数
分类专栏： 【Vue2.0-3.0点滴知识 】

https://segmentfault.com/q/1010000007555953

现在的项目中ajax请求都是用的vue-resouce在 组件created中调用. 这样写每次跳转都会刷新数据,现在想实现点击新页面的时候刷新数据,后退不刷新.应该怎么实现呢? vuex吗?望解答


可以这样，在router-view外面套一个keep-alive用来缓存路由，这样你打开过的路由再访问时就不会重新刷新，如果你需要打破这个限制，比如详情页不可以缓存，必须每次进去都加载，那么可以这样

这个demo你可以看一看http://github.com/lavyun

路由使用history模式的话，就可以使用scrollBehavior方法，

第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

就能根据这个参数判断当前是否后退，是否需要重新加载数据



barnett_y
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现前进刷新后退不刷新
youlinaixu的博客
04-04 590
参考文章： https://blog.csdn.net/qq_40963664/article/details/80062130 要实现前进刷新后退不刷新，要借助vue的keep-alive，一定要了解钩子函数的执行顺序。 不使用keep-alive beforeRouteEnter --> created --> mounted --> destroyed 使用keep-ali...
vue 刷新数据
caiji_1的博客
04-23 5050
vue中以一定间隔刷新数据 ··· <script> export default { data() { return { // 刷新间隔 stepNum: 100, // 设置定时器开关 interval: null } }, // 之前在大的主组件中使用了 keep-alive 缓存 activated() { if (this.interval === null) { ...
vue实现前进刷新后退不刷新效果
01-21
最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来（返回不用重新加载），关闭的界面能被销毁掉（再进入时重新加载）。例如对a->b->c 前进（b,c）刷新，c->b->a 后退（b,a）不刷新。 由于 keep-alive 会把所有加载的过的界面都缓存起来，没法实现返回时将界面销毁掉，导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候，调用 this.$destroy(true) 来将界面销毁掉。但是在移动端 android设备上会有物理返回键，如果通过物理返回键返回的话，就没法处理了。虽然可以重写android的返回
vue3 如何设置前进刷新，后退不刷新
u011004827的博客
11-01 1538
在组件上添加v-if=“$route.meta.keepAlive”，这样只有被标记为需要缓存的组件才会被缓存。在组件上添加:key=“$route.fullPath”，这样每次路由变化时，组件都会重新渲染。在Vue3中，可以使用组件的v-slot来实现前进刷新，后退不刷新的效果。在路由配置中，为需要缓存的组件添加meta字段，并设置keepAlive为true。在组件上添加v-slot，并指定name为default。
Vue 中如何重置 Data？
最新发布
My_wife_QBL的博客
07-08 905
在 Vue 中重置 data 是一个常见需求，本文详细介绍了多种方法和最佳实践，包括使用初始 Data 对象、备份 Data 对象、递归重置嵌套对象、深拷贝、重置表单数据、重置计算属性和侦听器，以及重置组件状态。通过合理选择和组合这些方法，你可以更好地管理和控制组件的数据状态，提升开发效率和用户体验。希望本文的详细介绍能帮助你更好地理解和应用这些方法，优化你的 Vue 应用程序。
vue3.0实现前进刷新后退不刷新
知行合一，跬步致远
07-16 2722
1、通过keep-alive缓存组件； 2、组件路由里定义一个变量isKeepAlive来控制组件的缓存； 3、通过路由独享守卫根据条件修改缓存变量，选择性缓存组件。
解决Vue组件前进刷新,后退不刷新问题
微光的博客
08-26 749
vue 官网给出的一个方法是通过keep-alive将router-view包住就能实现组件不刷新显示原来的数据，但是在组件中一般都是前进更新数据返回的时候不刷新保留原来的数据，增加用户体验，通过搜索发现了一个方法 export default { name: 'xxx', data () { //... }, deactivated () { ...
vue前进刷新，后退不刷新
蛋蛋老公的博客
05-14 349
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 实现前进刷新后退不刷新的效果
10-16
总结来说，实现Vue前进刷新、后退不刷新的效果，关键在于合理使用`<keep-alive>`组件进行组件缓存，并结合路由元信息和`$route`的监听来控制何时刷新数据。这种做法既保留了用户体验，又能确保在必要的时候更新页面...
vue项目实现前进刷新后退不刷新
07-02
在Vue.js应用中，"前进刷新后退不刷新"是一个常见的需求，主要是为了优化用户体验，保持用户在浏览历史中的状态。这个项目提供了三种不同的方法来实现这一功能，主要利用了Vue的`keep-alive`组件和路由管理策略。...
vue实现前进刷新后退不刷新且后退时回到历史浏览位置
weixin_38680881的博客
07-02 868
Vue实现前进刷新后退不刷新且后退时回到历史浏览位置 需求 最近的项目需要实现从列表页跳到详情页后再从详情页回退到列表页时能顾回到历史浏览的位置（也就是滚动条上次滚动的位置） 实现 1.在router文件里需要缓存、记录位置的组件里添加keepAlive参数 { path: "/owner", name: "owner", component: owner, meta: { requireAuth: true, keepAl
vue实现页面前进刷新后退不刷新或者前进后退都刷新而某一个页面后退不刷新
versionli的博客
12-17 1687
有时候我们在开发的时候会遇到一个需求： 我在home页面选择了一个分类跳到about页面的时候根据home页面转过来的分类数据加载一些商品数据，之后选择了一个商品又跳到detail详情页面，这时客户是选错了想返回上一个页面的重新选择，但是about页面重新加载了数据和页面，客户不知道刚才滑动到哪里了，也忘记了选择哪一个商品，得要重新滑到下面，如果这时候我们做一个缓存体验就比较好。如果页面全部用keep-alive那肯定不行，因为客户返回上一个页面选择一个商品的时候再跳到详情页，keep-...
vue实现前进后退保持页面状态，不被刷新
goudan的博客
06-17 3896
需求 在当前页面进行一些操作，然后需要跳转到其他页面进行操作并取得结果，再返回到当前页面继续操作，此时需要保持当前页面不被刷新，才能继续进行操作。但是由于vue的动态组件机制，跳转页面时会销毁当前组件再创建其他页面，如果需要保存页面状态，就需要将页面缓存起来，再次进入的时候从缓存里读取即可。 实现方法 keep-alive 使用vue提供的抽象组件keep-alive，将需要缓存的页面包裹起来，就能实现。在App.vue文件中添加如下代码。 <keep-alive> <router-
vue监听浏览器的后退和刷新事件
冬瓜的博客
07-05 3004
【代码】vue监听浏览器的后退和刷新事件。
路由退回到之前的页面后数据不刷新
最是人间留不住，朱颜辞镜花辞树。
07-06 3352
有两个页面A和B，我们使用单页面的形式，使用vue-router来实现页面的“跳转”，当我们一开始打开A页面时，执行了页面的created和mounted，跳转到B页面，执行了B页面的created和mounted，但是，当我们从B页面“跳转”回A页面时，我们发现不会执行created和mounted了，因为这个Vue组件已经加载了，它不会重复执行方法，如果我们要在路由发生变化的时候执行方法，那我们就需要监听$route的变化，在它变化的时候执行方法。
vue页面前进或后退时刷新数据（重置恢复为初始值）
vvv3171071的博客
11-30 7003
普通的vue项目使用this.$router.go(-1)就能同时实现后退+刷新了。 但是在vue-element-admin或其他复杂的项目中（尤其是后台管理系统），有独特的路由跳转配置，比如在vue-element-admin中使用this.$router.go(-1)，原页面的数据并不会刷新，因为配置了快捷导航(标签栏导航) 该方案运用了 keep-alive 和 router-view 的结合，所以跳转路由后原页面的数据仍然存活。 解决方案： ①、首先，找到页面恢复初始化数据的方法，我采用的是以
Vue前进刷新，后退缓存
hongsir的博客
12-09 2018
vue中要实现的一个场景就是：1.从搜索页面 -》 搜索结果列表页时，搜索结果列表页要重新获取数据。2.搜索结果列表页面 -》点击进入详情页 -》 再从详情页返回结果列表页，要保存上次已经加载的数据和自动还原上次的浏览位置。需要用到缓存组件
vue路由跳转回退后页面不刷新处理
qq_39652695的博客
03-21 6572
在vue的项目中，在 router/index.js 设置 路由信息时，如果 当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。 因此，刷新页面数据的话需要 list 的数据放在 activated 的生命周期里面，否则就会造成跳会这原来的页面，数据没有更新。 ...
vue实现后退不刷新前进刷新
06-10
在Vue中实现后退不刷新、前进刷新的方法有很多种，其中一种比较常用的方法是使用Vue Router中的导航守卫（Navigation Guards）。 具体实现方法如下： 1. 在Vue Router中定义路由时，给需要实现后退不刷新、前进...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值