keep-alive保持前进刷新,后退缓存解决方案

可以实现:

a页面 =》b页面, b页面刷新。

b =》 a, a不刷新,缓存。

b =》 c , c刷新。

c =》 b, b不刷新, 缓存。

实现步骤:

第一步:

npm包解决问题: https://www.npmjs.com/package/v-keep-alive-chain

第二步:

用法:npm install v-keep-alive-chain

然后在 main.js 里对该包进行引用:

Vue.use(VKeepAliveChain, {
  key: 'cacheTo' // 可选的 默认为cacheTo
})

第三步:

配置router.js, 如下:

    {
      path: '/report-detail/:mrId',
      name: 'ReportDetail',
      meta: { cacheTo: ['RegisterPage', 'DiseaseMap'], title: '病情分析报告', showTitle: true },
      component: () => import('@/views/ai-diagnosis/ReportDetail.vue')
    },

解释:

cacheTo数组里的,是想要进入页面的name值, 如上诉代码, 在页面 ReportDetail(a) 跳往 RegisterPage(b)页面时, b页面就会刷新,但b跳往a页面时,a不刷新。

原文地址:https://www.cnblogs.com/mamimi/p/13725165.html