v-keep-alive-chain

Vue前进刷新，后退不刷新（Forward refresh, back not refresh）

Usage no npm install needed!

<script type="module">
  import vKeepAliveChain from 'https://cdn.skypack.dev/v-keep-alive-chain';
</script>

README

v-keep-alive-chain

vue缓存链控制，Vue前进刷新，后退不刷新（Forward refresh, back not refresh）

online demo

Installation

Use

$ npm install v-keep-alive-chain

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

然后在App.vue（视你的情况而定）中

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

接着在router中配置你的需求

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

然后就能愉快的玩耍了

Local setup

npm install
npm run serve

License

MIT