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

进入前端入门建站教程官网入口

HTTP协议中的Keep-Alive有什么问题？如何避免Keep-Alive问题？

什么是HTTP协议中的连接管理？HTTP协议有哪些连接管理策略？

HTTP协议中的HTTP Keep-Alive是什么？它的主要作用是什么？

Vue项目中如何使用keep-alive方法

vuejs简单介绍vue安装和卸载方法

标签： keep-alive, vuejs, vuejs缓存, 缓存

上面是“vuejs前进刷新，后退缓存功能介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2239.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！