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

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

npm install v-keep-alive-chain

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()
}))

2、App.vue

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<VKeepAliveChain>
  <router-view v-if="!$route.meta.keepAlive"/>
</VKeepAliveChain>

3、router.js

[
  {
    path: '/list',
    name: 'list',
    meta: {
      cacheTo: ['info']
    }
    // ...
  },
  {
    path: '/info',
    name: 'info',
    // ...
  }
]

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

以上是编程学习网小编为您介绍的“vuejs前进刷新，后退缓存功能介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。