vue缓存页面保持状态,vue部分页面需要缓存,部分不需要缓存
本文主要介绍了Vue前端页面缓存的过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
Vue前端页面缓存1。使用场景2。2.3 .保活的基本知识3。路由页面缓存的保活实现vue页面缓存问题1。路由设置2。页面传送3的嵌套设置。从指定页面返回缓存的数据
Vue前端页面缓存
1.使用情景
在使用Vue开发单页面应用时，我们通常使用Vue-Router进行页面导航。当Vue-Router切换路由时，页面将重新加载，相应的生命周期功能将再次执行。然而，在一些业务场景中，
比如：
在分页数据列表中，如果切换到第三页，需要查看列表对应数据的详情页，然后返回。如果不做任何处理，列表页会重新加载，默认显示第一页数据，而不是之前的第三页，所以如果还需要查看之前查看的下一页数据，就需要切换到第三页，以此类推。在列表页面过滤查询条件，找到对应数据后查询明细，跳转到明细页面，然后返回。默认情况下，列表会清除查询条件并显示所有数据。以上两种场景都会带来非常不好的用户体验。此时，有必要对列表页面进行路由缓存。在Vue-Router中，keep-alive可用于缓存路由页面。
2.keep-alive基本认识
Vue中提供了内置组件keep-alive。动态组件由keep-alive元素包装，内部组件将被缓存。Keep-alive包装的组件，加载的页面，在页面第一次进入的时候不会执行生命周期功能的一部分，当它再次进入的时候。两个生命周期功能，激活的和去激活的，将被添加到包装在keep-alive中的组件。include和exclude这两个属性可以有条件地使缓存保持活动状态。包含在include中的组件将被缓存，包含在exclude中的组件不会被缓存。
3.keep-alive实现路由页面缓存
有两种方法可以通过keep-alive缓存路由页面，如下所示：
（一）、使用include控制需要缓存的页面
//home.vue
模板
差异
.
保持活力：include=cashViews
路由器视图/路由器视图
/保持活力
/div
/模板
脚本
导出默认值{
data() {
返回{
//要缓存的组件
现金视图：[list]
}
}
}
/脚本
//list.vue
脚本
导出默认值{
//处理组件内路由保护的钩子函数中的逻辑
beforeRouteEnter(收件人，发件人，下一个){
If (from.name===Index) {//处理完页面缓存后，返回首页重新进入缓存页面时数据更新。
//这个生命周期无法获取这个，所以vm实例作为参数传递。
接下来(虚拟机={
vm.pages.pageNum=1
//因为我这里的查询表单是动态的，需要在首页进入的时候调用一次。在方法更改中请求返回后，调用获取列表数据的getTableDatas方法。
vm.getQueryList()
})
} else if(！From.name) {//刷新页面时，没有执行获取动态表单的方法，导致表单无法加载。
接下来(虚拟机={
vm.getQueryList()
})
}否则{
//返回详细信息时，只会更新列表数据，因为如果你在详细信息页面上做了什么，列表数据的状态会发生变化，其他人会使用缓存。
接下来(虚拟机={
vm.getTableDatas()
})
}
}
}
/脚本
以上实现是针对我自己的项目业务场景。如果查询表单不是动态获取的，而是页面写死的，可以在激活的钩子中调用查询列表数据方法。这样，每次进入缓存页面，只会更新列表数据，其他缓存不会改变。
问题：也会存在。列表缓存数据后，返回主页，再次进入列表页面。缓存的数据还在，所以可以在路由守卫的beforeRouterLeave钩子中处理。
已激活(){
this.getTableDatas()
},
beforeRouterLeave(到，从，下一个){
if (from.name===Index) {
//如果从首页进入时调用reset方法
this.reset()
}
}
两点注意：
要缓存的路由组件必须设置name属性，该属性对应于cashViews中的值；如果有很多组件需要缓存，可以使用vuex来管理cashViews。（二)、根据v-if控制显示的router-view
在路由表路由中配置meta属性，添加keepAlive属性，并将要缓存的页面的keepAlive设置为true。
{路径：“/list”，
名称：列表，
组件：列表，
元：{
keepAlive:真
}
}
根据当前接入路由的保活值进行路由选择。
//home.vue
模板
.
点火电极
路由器视图v-if= $ route . meta . keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route . meta . keepalive /router-view
/模板
修改组件的guard钩子中keepAlive的值，控制页面是否缓存。
//List.vue
导出默认值{
/*当您离开列表组件时，将keepAlive值更改为false，以确保在您进入页面时页面被刷新。
*/
beforeRouteLeave(收件人、发件人、下一个){
from.meta.keepAlive=false
下一个()
}
}
//Detail.vue
导出默认值{
/*从Detail返回列表时，将列表的keepAlive更改为true，并确保在返回列表页时不使用cache刷新页面。
*/
beforeRouteLeave(收件人、发件人、下一个){
if(to.name===List) {
to.meta.keepAlive=true
}
下一个()
}
}
vue页面缓存问题
1.路由设置
路线：[
{
路径：“索引”，
组件：注意，
元：{
KeepAlive: true //是否缓存该标志
}
}
]
设置主元信息(keepAlive)以指示页面需要缓存。
2.页面路由嵌套设置
点火电极
//在keep-alive中写入要缓存的页面
view-router v-if= $ route . meta . keepalive /view-router
/保持活力
//不需要缓存的页面写在外面
view-router v-if=！$ route . meta . keepalive /view-router
页面跳转时，需要缓存的页面血液放在keep-alive标签中，不需要缓存的页面直接显示。
注意：缓存页面会给页面添加两个生命周期：激活和停用。
3.从指定页面返回使用缓存数据
当其他页面进入时，数据将被重新加载。
将以下代码添加到要缓存的页面中
//进入页面时，判断是否从详情页返回。
beforeRouterEnter(收件人，发件人，下一个){
if(to.path===/detail) {
这个。$route.meta.isBack=true
}
下一个()
},
已激活(){
//如果没有从详细信息页面返回，则重新加载数据
如果(！这个。$route.meta.isBack) {
//加载页面数据
}
//重新设置页面的路由元信息
这个。$route.meta.isBack=false
}
在进入页面时，首先判断是否从细节返回，在从细节的页面路由元信息中添加一个标志，在页面加载过程中判断是否从细节返回。如果是，不加载数据，否则，重新加载页面数据。最后，需要再次设置页面路由元信息，防止下次默认isBack: true，其他页面不会加载数据。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。