标签页keep-alive

Tag keep-alive

背景

经常有这样的场景:

image.png

在切换红色区域的标签页的时候,希望搜索框、搜索结果保留,当关闭,重新打开的时候置空。

再比如编辑页面或添加页面填写内容后跳转其他标签,再次跳转回操作页面保持填写数据不消失,而不是重新刷新页面

使用keep-alive

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,所以需要它来解决上述场景问题。

使用方式

默认所有页面进行keep-alive,但是对特殊页面可以将其去掉

菜单路由中配置参数 noKeepAlive: false //如果设置为true,则不会被 缓存(默认 false)

页面中的name需要和router中定义的name相同,如:

export default {
  name: 'RoleManage',
  components: {
    RoleTree,
    RoleList,
    RoleDataScope
  },
  props: {},
  data() {
//角色管理页面路由
{
  path: '/role-manage',
  name: 'RoleManage',
  meta: {
    title: '角色管理',

项目设置最多只保存30个标签页缓存,可在src/store/
module/app.js,pushKeepAliveIncludes方法中修改保存个数

// 加入缓存 pushKeepAliveIncludes (state, val) { if (state.keepAliveIncludes.length < 30) { let number = state.keepAliveIncludes.findIndex(e => e === val); if (number === -1) { state.keepAliveIncludes.push(val); } } },

如果页面中点击返回需要跳转指定页面,而不是默认跳转相邻页面。如:保存添加后跳转列表页。

我们在src/store/module/app.js中提供了不跳转相邻页面方式,关闭后可执行自定义跳转页面,可参考缓存策略菜单内实现方式。

router/index.js // 关于当前页面 Router.prototype.closeCurrentPage = function () { let current = this.history.current; store.commit('closeTag', current); store.commit('deleteKeepAliveIncludes', current); }; // 关闭当前页面然后跳转到指定页面 Router.prototype.closeCurrentPageAndPush = function (pushParam) { let current = this.history.current; store.commit('closeTagNotPushNextRoute', current); store.commit('deleteKeepAliveIncludes', current); this.push(pushParam); };
关闭页面跳转刷新列表

在router参数中添加noKeepAlive=true

this.$router.closeCurrentPageAndPush({ name: 'KeepAliveContentList', params: { noKeepAlive: true } }); this.$router.closeCurrentPageAndPush({ name: 'KeepAliveContentList', query: { noKeepAlive: true } });

作者简介:
卓大, 1024创新实验室主任,混迹于各个技术,熟悉点java,略懂点前端。