在我们的业务中,我们常常会有列表页跳转详情页,详情页可能还会继续跳转下一级页面,当我们返回上一级页面时,我想保持前一次的所有查询条件以及页面的当前状态。一想到页面缓存,在vue
中我们就想到keep-alive
这个vue
的内置组件,在keep-alive
这个内置组件提供了一个include
的接口,只要路由name
匹配上就会缓存当前组件。你或多或少看到不少很多处理这种业务代码,本文是一篇笔者关于缓存多页面的解决实践方案,希望看完在业务中有所思考和帮助。
正文开始…
业务目标
首先我们需要确定需求,假设A
是列表页,A-1
是详情页,A-1-1
,A-1-2
是详情页的子级页面,B
是其他路由页面
我们用一个图来梳理一下需求
![](https://i-blog.csdnimg.cn/blog_migrate/aa683f76c06dc1b726439e270b498aea.png)
大概就是这样的,一图胜千言
然后我们开始,主页面大概就是下面这样
pages/list/index.vue
我们暂且把这个当成A
页面模块吧
<template><div class="list-app"><div><a href="javascript:void(0)" @click="handleToHello">to hello</a></div><el-form ref="form" :model="condition" label-width="80px" inline><el-form-item label="姓名"><el-inputv-model="condition.name"clearableplaceholder="请输入搜索姓名"></el-input></el-form-item><el-form-item label="地址"><el-select v-model="condition.address" placeholder="请选择地址"><el-optionv-for="item in tableData":key="item.name":label="item.address":value="item.address"></el-option></el-select></el-form-item><el-form-item><el-button @click="featchList">刷新</el-button></el-form-item></el-form><el-table:data="tableData"style="width: 100%"row-key="id"borderlazy:load="load":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="date" label="日期"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column prop="options" label="操作"><template slot-scope="scope"><a href="javascript:void(0);" @click="handleView">查看详情</a><a href="javascript:void(0);" @click="handleEdit(scope.row)">编辑</a></template></el-table-column></el-table><!--分页--><el-pagination@current-change="handleChangePage"backgroundlayout="prev, pager, next":total="100"></el-pagination><!--弹框--><list-modaltitle="编辑"width="50%"v-model="formParams":visible.sync="dialogVisible"@refresh="featchList"></list-modal></div>
</template>
我们再看下对应页面的业务js
<!--pages/list/index.vue-->
<script> import { sourceDataMock } from '@/mock';
import ListModal from './ListModal';
export default {name: 'list',components: {ListModal,},data() {return {tableDat