vuejs前进刷新，后退缓存功能介绍

功能介绍：做了一个项目，有7、8个页面，想实现前进刷新，后退缓存，最后用了keep-alive的一个组件方法。

复制代码npm install v-keep-alive-chain
1

1、main.js

复制代码import { mergeBeforeEachHook, VKeepAliveChain } from 'v-keep-alive-chain'
 
Vue.use(VKeepAliveChain, {
  key: 'cacheTo' // 可选的 默认为cacheTo
})
 
// 如果你没有注册过beforeEach
router.beforeEach(mergeBeforeEachHook())
 
// 如果有注册beforeEach
router.beforeEach(mergeBeforeEachHook((to, from, next) => {
  next()
}))
1
2
3
4
5
6
7
8
9
10
11
12
13

2、App.vue

复制代码<keep-alive>
  <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<VKeepAliveChain>
  <router-view v-if="!$route.meta.keepAlive"/>
</VKeepAliveChain>
1
2
3
4
5
6

3、router.js

复制代码[
  {
    path: '/list',
    name: 'list',
    meta: {
      cacheTo: ['info']
    }
    // ...
  },
  {
    path: '/info',
    name: 'info',
    // ...
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

来源：https://www.npmjs.com/package/v-keep-alive-chain