vuex保活实现标签页缓存功能

在很多管理系统的开发过程中，经常会遇到这种需求，需要将打开的路由页面进行缓存，然后在系统头部提供tab标签，方便切换时参考，并对缓存的页面进行刷新和清除。具体演示如下图所示：

在上面的演示中，实现了类似于window tab tab tab的效果，并缓存了当前数据。在浏览器中缓存路由页面可以减少界面请求，也方便用户来回切换想要搜索的数据列表。

原则

Vue提供的保活API可以缓存路由组件。include属性可以绑定到包含要路由的组件的名称值的数组，该数组可以缓存路由组件。如果不需要缓存路由，可以直接移除元素。

代码组织和设计

为了实现上述功能，使用vuex保存全局缓存数据，定义为cacheView打开的路由页面用toolBarData保存。下图是代码设计：的整体图。

需要在缓存视图中添加一个路由页面，并需要actions setCacheView提交一个change Event来更改状态数据，然后修改后的数据将被自动调度到App.vue中使用数据的位置(即keep-alive)。添加标签也是类似的过程，不再赘述。至于为什么标签页和路由缓存页应该分成两个数组，主要有两个考虑因素：

名字

存储代码实现

存储代码的实现如下。clearToolItem是需要详细解释的主要一个。这个功能是清除标签。涉及两个规则：

如果关闭是当前活动的选项卡，则在关闭后。默认情况下，活动选项卡是最后打开的选项卡。

如果当前选项卡是最后一个选项卡(处于活动状态)，则关闭后，前一个选项卡将自动成为默认的活动选项卡。

从“”导入路由器./router ' export default { state : { toolbardata :[]，//save array cache view : of label button[]//save array to cache }，getter s 3360 { gettoolbardata(state){ return state . toolbardata；}，getCacheView(state){ return state . cacheview；}}，突变： {settooldata(状态，数据){//添加标签按钮。如果当前路线已经打开，不要再在toolbar=state . toolbardata . find(item=item . detail==data . detail)中添加常量！inToolbar state . toolbardata . push({ 0.data })；}，setCacheView(状态，数据){ //类似于setToolData if(状态。cacheview。包括(数据。组件名))返回；state . cacheview . push(data.component name)；}，clearToolItem(state，detail){ const index=state . toolbardata . find index(item=item . detail===detail)；const isaactive=router . app . $ route . path==state . toolbardata[index][' detail ']；const len=state . toolbardata . length-1；state.toolBarData.splice(索引，1)；(index==len | | isaactive)router . push({ path : state . toolbardata[state . toolbardata . length-1][' detail ']})；}，clearCacheView(state，viewName){ const index=state . cacheview . find index(item=item==viewName)；state.cacheView.splice(索引，1)；} }，actions : { commitToolBar({ commit }，data) { commit('setToolData '，data)；commit('setCacheView '，数据)；}，clearToolBar({commit}，data){ commit('clearToolItem '，data . detail)；}，clearCache({commit}，data){ commit('clearCacheView '，data)；}}}入口文件缓存路由

在App.vue条目文件中，使用keep-alive缓存匹配的路由组件，监视当前路由更改，并添加缓存的路由和标签。

模板El-main style='相对位置：边距-top :45 px；'！-渲染标签的地方-Tooll/Tooll div class=' RoutewRap '转换名称='渐变-变换'保活：包含='缓存视图'路由器-视图/路由器-视图/保活/过渡/div/El-main/模板脚本导出默认值{ watch: { $route() { //路由组件名称（自定义)const componentName=this .$路线。匹配的[0][“组件”][“默认”][“名称”]；常量详细信息=这个$ route.path//当前路由匹配到名称常量名称=这个.$路线。meta[0][' name ']；这个$store.dispatch('commitToolBar '，{ name，detail，component name })；} } } /scriptToolBar代码

这里使用了elementui的电子标签标签电子标签标签带有动画、关闭按钮、主题颜色等属性，关闭函数是清除该标签和清除缓存路由（已访问过)。点击主要是当对该标签项点击操作，则切换到该路由页面。其中活跃的是该标签匹配到当前路由时候处于激活状态（颜色高亮)，el-tag的动画比较生硬，所以关闭了。

template div class=' toolbar ' El-tag class=' tool item ' type=' info ' : disable-transitions=' false ' : closed=' item '。身份证！=0 '效果='普通' v-for='(项目，索引)在getToolData ' : key=' index ' : class=' { active : $ route。path==item。详细信息} ' @单击='重定向(项)' @ close=' close close ' ' close ' ' span class=' dot ' v-if=' $ route。path==item。详细信息/span { { item。name } }/El-tag/div/templatest import { mapgeters }导出默认的{ methods : { OutLook项目(项，索引){这个.$store.dispatch('clearToolBar '，item)；这个$store.dispatch('clearCache '，项目。组件名称)；},重定向（项){这个.$路由器。push({ path : item。detail })；} }，computed: {.mapgetter([' getToolData '，' getCacheView '])}；/script生命周期激活的和无效的

采用了点火电极缓存的路由组件，重新进入该路由，路由组件不会重新创建，所以也就不会触发组件的生命周期函数（比如说在创建、安装之前等)。所以在对该页面进行数据更新或者清除数据vue。为我们提供了激活的和无效的生命周期函数，当重新进入路由组件会触发激活的函数，离开则会触发停用。

模板分区一个页面/分区/模板脚本导出默认值{ data(){ return { form : { name : ' '，password:'' } }，activated(){ this.getList() }，deactivated(){ object。钥匙(这个。表格).map(key={ this。form[key]=' ' })} }/script总结

以上所述是小编给大家介绍的状态管理保活实现标签标签页面缓存问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！