vue页面缓存，keep-alive第一次无效的解决方法

如题所述

第1个回答 2022-07-10

方法二：使用 include + beforeRouteLeave + vuex 与方法一相似，不同的地方在于，将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存；跟方法一相比，不需要每次再重新初始化数据，但是需要在vuex中保存数据；

1、在创建router实例的时候加上scrollBehavior方法

2、将需要缓存的组件加在include属性里

3、在store里加入需要缓存的的组件的变量名，和相应的方法；

4、在beforeRouteLeave钩子函数里控制需要缓存的组件

相似回答

antdesign vue pro 项目 keep-alive 无效问题解决答：更改RouteView.vue文件如下

解决vue keepAlive 二次进入页面显示首次缓存问题答：1、调整 router-view 定义一个isRouterAlive变量，用来刷新keep-alive;通过provide向下面子孙组件们暴露一个reload方法，用来刷新缓存。2、设置缓存子组件注册inject: ['reload'] 方法，beforeRouteEnter钩子在进入缓存页面的时候通过通过判断路由是否是来自详情页面，如果不是详情页，我们就刷新缓存，如果是...

添加了vue.config.js还是无法解决缓存问题答：3、强制刷新缓存：若仍然无法解决缓存问题，可以尝试在浏览器中强制刷新缓存，或者在url中添加时间戳等随机参数，以避免缓存。4、使用第三方库：可以考虑使用第三方库来解决缓存问题，如cache-loader、hard-source-webpack-plugin等。这些库可以在webpack构建时缓存模块，以提高构建速度和性能。

移动端Vue界面缓存处理答：首先在vuex中定义需要缓存的界面的数据(先测试的滑动,所以分开写的可以只写一个data)先说下高度的滑动吧这个滑动的高度也是需要保存的.界面中沃使用cube-ui的scroll组件给data增加一个scrollHeight属性缓存界面高度.还有需要缓存的数据model 当界面滑动停止调用scrollend方法对scrollHeight进行赋值每次进入...

vue开启keep-alive需要注意的问题答：一、开启keep-alive 在这里keep-alive配合了router-view使用，keep-alive本身是vue2.0的功能，并不是vue-router的，所以在vue1.0版本是不支持的。二、产生的问题 keep-alive能使组件数据缓存，因此。如果有一个新闻列表，点击进入查看详情，返回点击查看其他新闻详情这时发现数据并没有更新，造成了数据不...

vuekeepalive热更新空白答：组件是Vue提供的一个功能强大的组件，用于缓存动态组件或路由组件。它会将组件保存在内存中，而不是直接销毁，以提高应用的性能。当开启热更新时，会导致组件重新渲染。但是在重新渲染时，组件会加载之前缓存的组件，而不会重新创建实例。这可能导致页面内容不会更新。解决这个问题的方法是在组件内部的组件...

keep-alive在vue2中应该怎样使用答：keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。基本使用如下:<keep-alive> <component>  </component></keep-alive> 一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表...

大家正在搜

vue中keepalive用法 vue keep-alive vue实现keepalive keep us alive的中文 vue keepalive原理 react keep alive keep-alive vue+elementui vue element ui教程