介绍

在使用vue vue-router开发SPA的时候，你有没有遇到过这样的情况：当我们在列表页和详细页之间切换的时候，如果列表页没有被缓存，那么每次从详细页返回的时候都会重新加载列表页。下图：

细心的朋友发现，从详情页返回列表页时，列表页过载，显然不是一个好的体验。此时，我们可以缓存列表页面。

保活实现页面缓存

并非我们项目的所有页面都需要缓存，因此这里有两种按需缓存的方法：

方法1:

首先，在定义路由时，配置元字段，并自定义一个KeepAlive字段来标记页面是否被缓存：

Routes: [{path:'/search '，name:' search '，component: search，meta 3360 { title : ' search list page '，keepalive 3360 true//需要缓存标记列表页}}，{path:'/detail '，name:' detail '，component3360 detail，meta : { title : ' detail page '，//不需要缓存detail page。因此不添加keepAlive标签}}]由于keepAlive组件不支持v-if指令，我们在App.vue中使用两个router-view通过当前路由的keepAlive字段来判断是否缓存页面：

div id=' app ' keep-alive router-view v-if=' $ route . meta . keep alive '/keep-alive router-view v-if='！$ route . meta . keepalive '/div方法2

在App.vue中使用保活提供的排除或包含选项，这里我们使用排除：

div id=' app ' keep-alive exclude=' detail ' router-view//keep-alive/div需要注意的是，页面组件必须给出相应的名称，例如，detail.vue:

Scriptexport默认{name:' detail '，//此名称应与keep-alive中的exclude选项值一致.}/script writing这意味着除了名称为detail的页面组件之外，项目中的所有页面都将被缓存。

特例优化：

如果详细页也是保活的，当列表页和详细页切换时，滚动位置可能会相互影响。此时，有必要在路由器实例中提供一个scrollBehavior方法：

导出默认新路由器({滚动行为(至、自、保存位置){if(保存位置){ return saved position } else { return { x : 0，y: 0}}，routes : [.],})

效果好像很好，实现了列表页面的缓存。但这实际上并不灵活。例如，当返回主页并进入此搜索页面时，由于没有处理，此搜索页面仍处于以前的状态：

但是，我希望在从主页进入搜索页面时，页面数据需要重置回初始状态。有没有哪一方可以灵活控制页面数据是否需要重置？这时，我想到了vue生态系统中的国家管理图书馆vuex。

使用vuex使页面更加灵活

需求分析：我们需要一个全局标志来控制每次进入缓存页面是否需要重置数据，这正是vuex可以做到的。

武克斯，起来

装置

npm安装vuex -保存

配置vuex

为了方便以后的维护，可以创建一个存储目录来存储vuex的模块代码。目录结构见下图：

state.js:

const state={ refresh search : true//标记是否刷新搜索页面}导出默认状态突变. js。

const matutations={ setrefreshssearch(state，flag){ state . refreshssearch=flag } }导出默认matutaionsindex.js

从“vue”导入vue从“vuex”导入vuex从“vuex”导入状态。/state“从导入变体”。/variations' vue.use (vuex)导出默认的new vuex.store ({state，variations})位于条目文件main.js中：

从“”导入存储。/store//这里指的是index.jsnewvue ({router，store，render:h=h (app)})。存储目录中的$ mount(“# app”)。这样，我们就相当于用vuex创建了一个标签，用来判断页面是否需要重置。

根据需要重置缓存页面中的数据

在哪里重置

保活组件有一个激活的唯一生命周期挂钩()。每次激活keep-alive组件时都会调用Activated()，而created()在创建时只会调用一次，如果再次激活则不会调用。所以这里我们需要在激活的()钩子中重置页面数据。

如果要在激活状态下重置，请重置()

这里，我们需要使用vuex中的refreshSearch标志来确定它是否需要重置

Search.vue:(这是需要缓存的页面)

Scriptimport {mapstate，mapvariations}来自' vuex '/vuex提供的映射函数，该函数用于简化导出默认值{activated () {if (this。刷新搜索){//如果为真，将执行页面重置等相关操作this . fetchdata()；} else { this . reset(true)；}}，方法：{fetch data () {//get page data}，mapvariations({ reset : ' setrefresh search '//将` this.reset()'映射到` this。$ store.commit(' setrefreshssearch ')`)})，Computed: {.映射状态([' refresh search '/this . refresh search映射到此。$ store.state.refresh search])，}}/script当我们从搜索页面转到详细信息页面时，我们想要搜索页面缓存，只需将标志设置为false:

方法： {go detail () {this。重置(false)//当您返回到搜索页面时，搜索页面不会将数据重置为此。$路由器。push ({path:'/detail'})}，地图变体({ reset : ' setrefresh search ' })}当我们从主页搜索页面时，我们想要重置搜索页面的数据，只需将标志设置为true:

方法： {gosearch () {this。reset(true)//这将在搜索页面时重置数据。预览这种效果。$路由器。push ({path:'/search'})}，地图变体({ reset : ' setrefresh search ' })}

摘要

介绍了如何根据需要使用keep-alive，以及如何用vuex控制keep-alive的组件页面的数据是否需要重置和刷新，希望对大家有所帮助。

附带相关知识门户：

Vue内置组件保活

虚拟路由器的滚动行为

生命周期挂钩已激活

Vuex州管理图书馆

以上就是边肖介绍的keep-alive vuex，它让缓存页面变得灵活，详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！