1. 首页
  2. 编程语言
  3. Javascript
  4. keep-Alive搭配vue-router实现缓存页面效果的示例代码

keep-Alive搭配vue-router实现缓存页面效果的示例代码

上传者: 2021-09-13 20:21:50上传 PDF文件 67.24 KB 热度 22次

  在routes.js中定义路由,在路由中定义元信息,需要缓存的页面就需要在meta对象中定义一个字段,这里设置为keepAlive,设置为true,反之,则不缓存。  然后修改App.vue页面  这样就可以实现有目的的对页面进行缓存了。在A页面中这样写:  用到keep-Alive,遇到的最多的一个问题就是怎么去掉这种缓存状态。但是需要注意的是,activated和deactivated这两个生存周期函数只存在于keep-Alive组件中。  先设置一个全局的标志符,类型为布尔值,代表是否为缓存状态,你可以把它存进vuex或者sessionStorage。

下载地址
用户评论