vue内置组件keep-alive多级路由缓存最佳实践

在我们的业务中，我们常常会有列表页跳转详情页，详情页可能还会继续跳转下一级页面，当我们返回上一级页面时，我想保持前一次的所有查询条件以及页面的当前状态。一想到页面缓存，在vue中我们就想到keep-alive这个vue的内置组件，在keep-alive这个内置组件提供了一个include的接口，只要路由name匹配上就会缓存当前组件。你或多或少看到不少很多处理这种业务代码，本文是一篇笔者关于缓存多页面的解决实践方案，希望看完在业务中有所思考和帮助。

正文开始…

业务目标

首先我们需要确定需求，假设A是列表页，A-1是详情页，A-1-1,A-1-2是详情页的子级页面，B是其他路由页面

我们用一个图来梳理一下需求

大概就是这样的，一图胜千言

然后我们开始，主页面大概就是下面这样

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() {retur