Th技术开发白皮书

keep-alive页面保活说明

2022/9/30 vue

# 用户体验：页面tab切换保活机制代码更新说明

代码从产品的admin前端进行copy替换

# 0、安装 @vunamhung/arg.js 依赖

先看看 package.json 是否已安装过 argjs 没有安装则只需如下：

yarn add @vunamhung/arg.js
或
npm i @vunamhung/arg.js

# 1、新增 重写的KeepAlive js

复制到 src/components/KeepAlive/index.js

# 2、main.js 引入 KeepAlive

import KeepAlive from './components/KeepAlive'
Vue.component('BaseKeepAlive', KeepAlive)

# 3、修改 src/layouts/components/AppMain.vue

将vue内置的 keep-alive 替换为我们自定义的 base-keep-alive 如下：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <base-keep-alive :include="cachedViews">
        <router-view :key="key" />
      </base-keep-alive>
    </transition>
  </section>
</template>

# 4、替换 src/store/modules/tagsView.js

整个js文件替换就行了

# 5、ThListMixin.js 修改

去掉 activated 函数钩子方法

去掉 created 函数钩子方法if条件中的 !this.$route.meta.keepAlive

# 6、修改 src/router/index.js

在 Vue.use(VueRouter) 的代码 上面新增如下代码：

import store from '@/store'

const orginPush = VueRouter.prototype.push

VueRouter.prototype.push = function(location, onComplete, onAbort) {
  let view
  if (typeof location === 'string') {
    view = { path: location }
    store.dispatch('tagsView/delCachedView', view).then(item => {
      orginPush.call(this, location, onComplete, onAbort)
    })
  } else if (location._normalized === undefined) {
    view = location
    store.dispatch('tagsView/delCachedView', view).then(item => {
      orginPush.call(this, location, onComplete, onAbort)
    })
  } else {
    if (location.tabLast !== undefined) {
      orginPush.call(this, location.path, onComplete, onAbort)
    } else {
      orginPush.call(this, location, onComplete, onAbort)
    }
  }
}

注意

因为所有打开的页面再tab 中都会保活，会有一个问题存在就是 某个页面中有遮罩弹窗打开，在弹窗中又有跳转其他页面的操作，这样会有个问题就是遮罩会一直存在这导致无法继续操作问题。

解决办法统一交互体验规范：只要是遮罩弹窗中跳转其他页面先关闭当前弹窗再进行跳转

# 以上操作完成就可以打包更新拉 ，赶快试试吧

和服务端进行交互