vue后退不刷新页面

已于 2023-03-21 11:41:11 修改
阅读量483 收藏 1
点赞数
文章标签： 前端 vue.js Powered by 金山文档
于 2023-03-20 16:17:55 首次发布
原文链接：https://www.cnblogs.com/wonyun/p/8763314.html
版权
文章介绍了如何在Vue.js应用中利用keep-alive组件来缓存路由页面，避免在详情页和列表页切换时数据刷新。通过在模板中添加keep-alive，配置路由的meta信息以启用缓存，可以实现列表页不重新加载数据的效果。
摘要由CSDN通过智能技术生成

keep-alive方案

第一步 模板中使用keep-alive来缓存对应的路由组件

第二步，在路由页面配置开启缓存

第三步，从详情页跳转回列表页面，列表页面为开启缓存的路由，那列表页面将不会刷新数据

补充代码简化、

参考文章

https://blog.csdn.net/qq_41064597/article/details/122829239?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-122829239-blog-81185574.pc_relevant_3mothn_strategy_recovery&spm=1001.2101.3001.4242.2&utm_relevant_index=4

https://blog.csdn.net/m0_70977931/article/details/128627979?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-128627979-blog-123259271.pc_relevant_3mothn_strategy_recovery&spm=1001.2101.3001.4242.2&utm_relevant_index=4

费马程序猿
关注
vue 后退不刷新
Sweet_Waf的博客
08-20 733
假设有两个页面:列表页A和详情页B，现需求从A页面进入B页面刷新，从B页面回退A页面不刷新。 解决方案使用keepAlive 在 App.vue 插入以下代码： <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 Home！ --> </router-view> </keep-alive>
vue路由跳转回退后页面不刷新处理
a_alin的博客
07-20 1万+
利用keep-alive 缓存需要缓存的页面
vue 前进刷新后退不刷新
最新发布
让优秀成为一种习惯
08-29 329
如何通过路由实现页面后退返回的时候不重新加载页面
vue3 如何设置前进刷新，后退不刷新
u011004827的博客
11-01 1706
在组件上添加v-if=“$route.meta.keepAlive”，这样只有被标记为需要缓存的组件才会被缓存。在组件上添加:key=“$route.fullPath”，这样每次路由变化时，组件都会重新渲染。在Vue3中，可以使用组件的v-slot来实现前进刷新，后退不刷新的效果。在路由配置中，为需要缓存的组件添加meta字段，并设置keepAlive为true。在组件上添加v-slot，并指定name为default。
vue返回上一页并不刷新
热门推荐
weixin_40791614的博客
02-27 1万+
vue返回上一页并不刷新 vue返回上一页并不刷新 1.首先添加keep-alive <keep-alive > <router-view :key="key" v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view :key="key" v-if="!$route.meta.keepAlive"></rou
vue实现前进刷新后退不刷新效果
08-28
vue实现前进刷新后退不刷新效果 在 Vue 框架中，如何实现前进刷新、后退不刷新的效果是一个常见的问题。这个效果的实现可以让用户在浏览应用程序时，加载过的界面能够缓存起来，不需要重新加载，而关闭的界面能够被...
vue实现页面前进刷新后退不刷新或者前进后退都刷新而某一个页面后退不刷新
versionli的博客
12-17 1734
有时候我们在开发的时候会遇到一个需求： 我在home页面选择了一个分类跳到about页面的时候根据home页面转过来的分类数据加载一些商品数据，之后选择了一个商品又跳到detail详情页面，这时客户是选错了想返回上一个页面的重新选择，但是about页面重新加载了数据和页面，客户不知道刚才滑动到哪里了，也忘记了选择哪一个商品，得要重新滑到下面，如果这时候我们做一个缓存体验就比较好。如果页面全部用keep-alive那肯定不行，因为客户返回上一个页面选择一个商品的时候再跳到详情页，keep-...
vue项目实现前进刷新后退不刷新
07-02
在Vue.js应用中，"前进刷新后退不刷新"是一个常见的需求，主要是为了优化用户体验，保持用户在浏览历史中的状态。这个项目提供了三种不同的方法来实现这一功能，主要利用了Vue的`keep-alive`组件和路由管理策略。...
解决vue页面刷新或者后退参数丢失的问题
08-27
解决 Vue 页面刷新或者后退参数丢失的问题 在 Vue 项目中，经常会遇到列表数据筛选查询的情景。当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），选择的筛选条件会全部丢失，这种情况会对用户体验产生...
Vue 实现前进刷新，后退不刷新的效果
做一个有知识的流氓
06-22 345
然后在列表页的 created 函数里添加 ajax请求，这样只有第一次进入到列表页的时候才会请求数据，当从列表页跳到详情页，再从详情页回来的时候，列表页就不会刷新。在需求一的基础上，再加一个要求：可以在详情页中删除对应的列表项，这时返回到列表页时需要刷新重新获取数据。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。在一个列表页中，第一次进入的时候，请求获取数据。添加列表页的名字，缓存列表页。
vue中beforeRouteLeave实现页面回退不刷新的示例代码
12-13
路由切换返回前一个路由时实现页面不刷新功能，首先想到的是keep-alive，但是页面不属于父子级关系，所以决定用beforeRouteLeave，下面贴代码 beforeRouteLeave(to, from, next){ if(to.name !== 'page2'){ //判断是从哪个路由过来的，如果不是page2过来的需要做什么操作在这里实现 //如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可 } next(); } beforeRouteLeave后面的参数to是关于上个页面的信息，to.name就是上个路由名称
vue2.0页面前进刷新回退不刷新的实现方法
10-18
主要介绍了vue2.0页面前进刷新回退不刷新的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中keep-alive 实现后退不刷新并保持滚动位置
11-20
什么是KeepAlive？ 首先，我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive。TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念，不能混为一谈。实际上HTTP的KeepAlive写法是Keep-Alive，跟TCP的KeepAlive写法上也有不同。 TCP的keepalive是侧重在保持客户端和服务端的连接，一方会不定期发送心跳包给另一方，当一方端掉的时候，没有断掉的定时发送几次心跳包，如果间隔发送几次，对方都返回的是RST，而不是ACK，那么就释放当前链接。设想一下，如果tcp层没有keepalive的机制，一旦一方断
关于vue页面后退不刷新
weixin_57538525的博客
11-24 1471
今天遇到了点击浏览器的回退，上一页的页面没有走生命周期，也没有重新发请求，没有刷新。就只有样式的情况，网上搜了一下，说是因为开了keep-live的原因，但是我并没有开这个路由缓存。暂不知道原因。但是可以使用 window.location.href=路由。不要用this.$router.push(路由);这样浏览器的的页面后退就是完全刷新了。但是这样跳转也是浏览器跳转，不是单页面应用了。 ...
如何使vue2路由后退不刷新
Newtaylor的博客
10-24 356
1. 设置路由为两种情况，路由meta.keepAlive为true/false,true则运行缓存路由组件，false则重新加载路由组件 &lt;keep-alive&gt;      &lt;router-view v-if="$route.meta.keepAlive"&gt;         &lt;!-- 这里是会被缓存的视图组件，比如 Home！ --&gt;     &lt;/rou...
vue前进刷新后退不刷新
qq_38317380的博客
03-21 1244
vue前进刷新后退不刷新
vue3 router 后退
03-15
在Vue 3中，Vue Router是用于实现路由功能的官方插件。要实现后退功能，可以使用Vue Router提供的`router.go()`方法。 `router.go()`方法接受一个整数作为参数，表示要前进或后退的步数。如果参数为正数，则表示前进；如果参数为负数，则表示后退。例如，`router.go(-1)`表示后退一步。 以下是一个示例代码，演示如何在Vue 3中实现后退功能： ```javascript // 导入Vue和Vue Router import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes: [ // 定义路由规则 { path: '/', component: Home }, { path: '/about', component: About }, // ... ] }) // 创建Vue应用程序实例 const app = createApp(App) // 将路由实例挂载到Vue应用程序实例中 app.use(router) // 在组件中使用后退功能 export default { methods: { goBack() { this.$router.go(-1) } } } ``` 在上述示例中，我们首先导入了Vue和Vue Router，并创建了一个路由实例。然后，在Vue应用程序实例中使用`app.use(router)`将路由实例挂载到应用程序中。 最后，在组件中可以通过`this.$router.go(-1)`来实现后退功能。当调用`goBack()`方法时，页面将后退一步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值