vue关于点击详情页面keep-alive的缓存问题

目录
  • 点击详情页面keep-alive的缓存问题
  • vue中路由表单缓存（keep-alive）
    • 页面效果
    • 父组件代码
    • 被缓存组件代码

点击详情页面keep-alive的缓存问题

今天有个列表

点击以后 进入详情 然后在返回，再点击其他的列表数据，详情页面请求的还是上一次请求的id 除非刷新才会请求现在的.

这样子对用户体验感是非常不好滴,查了半天资料 发现了activated这个api

解决有些不需要被缓存的组件页面 设置 activated 即可以再次进行事件的响应

vue中路由表单缓存（keep-alive）

vue 中从一个路由切换到另一个路由的时候，第一个路由可能有表单信息，但切换到第二个路由时，第一个路由里的组件会被销毁，表单里填写的 value 也会消失，keep-alive 就可以帮我们缓存我们不想被销毁的组件。

页面效果

父组件代码

<!-- 如果没有 include 属性，那么就会缓存全部子路由组件，这样做是没有必要的，只缓存表单组件即可 -->
<keep-alive include='News‘>
<!-- 缓存多个组件的写法 -->
<!-- <keep-alive :include=['News','Massage']> -->
	<router-view></router-view>
</keep-alive>

被缓存组件代码

<template>
  <ul>
    <li>news001 <input type='text'></li>
    <li>news002 <input type='text'></li>
    <li>news003 <input type='text'></li>
  </ul>
</template>
<script>
export default {
  name: "News",
};
</script>

那么问题来了，如果在缓存组件开一个定时器，那么切换到其他组件定时器永远不会被销毁，这样运行效率会很低，那么这时候我们需要两个新的生命周期函数 activated 与 deactivated

<script>
  export default {
    name:'News',
    data(){
      return {
        count:0,
      }
    },
    activated(){
      this.timer = setInterval(()=>{
        this.count++
      },20)
    },
    deactivated(){
      clearInterval(this.timer)
    }
  }
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue缓存之keep-alive的理解和应用详解

    官方解释: <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 主要用于保留组件状态或避免重新渲染. keep-alive 是 Vue 的内置组件,

  • vue中keep-alive多级路由缓存问题

    目录 1.问题描述 2.原因分析 3.解决思路 4.处理过程 1.问题描述 对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时,正常切换两个便捷页签时是可以正常缓存的,但删除最后一个页签时,此时另一个页签页面此时已经不缓存了. 2.原因分析 keep-alive默认支持缓存是两级,对三级及以上层级的页面缓存失效,之前的处理方式为: 监听到路由变化后,将当前的路由的标识及父级标识一起存起来,当多个页面存在时,关闭其中一个页面,也会将本身及父级的标识一起删掉,此时数组中已无父级标识,其他同

  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    目录 一.前言 二.使用 1.vue2和vue3的不同 2.页面某些数据不需要缓存 3.动态设置keepAlive属性 4.使用include,exclude配置需要缓存的组件 5.部分页面过来需要缓存,部分页面过来需要刷新 6.缓存只在一级路由生效 总结 一.前言 当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子 vue2和vue3的使用方式是不一

  • vue使用keep-alive后清除缓存的方法

    什么是keepalive? 在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件. 也就是说,keepalive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 .也就是所谓的组件缓存 基本用法 <keep-alive> <component /> //你的组件 </keep-alive> 需求:从列表页进入详情页,再返回列表页时保留查询条件,但在切换其他tab

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • vue关于点击详情页面keep-alive的缓存问题

    vue关于点击详情页面keep-alive的缓存问题

    目录 点击详情页面keep-alive的缓存问题 vue中路由表单缓存(keep-alive) 页面效果 父组件代码 被缓存组件代码 点击详情页面keep-alive的缓存问题 今天有个列表 点击以后 进入详情 然后在返回,再点击其他的列表数据,详情页面请求的还是上一次请求的id 除非刷新才会请求现在的. 这样子对用户体验感是非常不好滴,查了半天资料 发现了activated这个api 解决有些不需要被缓存的组件页面 设置 activated 即可以再次进行事件的响应 vue中路由表单缓存(ke

  • Vue模拟数据,实现路由进入商品详情页面的示例

    一.路由 首先需要配置路由,就是点击good组件进入goodDetail组件 配置路由如下 { path: '/goodDetail', component:goodDetail } 同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id //点击路由到商品详细信息页 selectGood(){ router.push({ path: 'goodDetail', query:{goodId:this.goodDetail.id}}) } 二.在goodDetail组件中接收路

  • Vue实现购物车详情页面的方法

    上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用. 搭出购物车结构 我们将购物车底部构建出来, <templete> <div class="shopcart" :class="{'highligh':totalCount>0}">

  • Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

    平时项目中,经常会做一些下拉菜单等效果,这种效果可能会需要通过一个按钮来控制显示隐藏,并且当点击页面其他空白区域时,也要将其隐藏. 简单写个Demo <!-- 按钮 --> <button @click.stop="ShowHidden = !ShowHidden">显示或隐藏</button> <!-- 下拉列表 --> <div v-if="ShowHidden" @click.stop="&quo

  • vue实现点击按钮“查看详情”弹窗展示详情列表操作

    html: <template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="task

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    目录 1. 安装 vue 脚手架 2. 创建项目 3. 引入 bimface 文件 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1.安装 vue 脚手架 2.创建项目 3.引入 bimface 响应的文件 4.修改 App.vue 文件,实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令,全局安装 vue 脚手架工具 npm install

  • vue 中使用 bimface详情

    vue 中使用 bimface详情

    目录 1. 安装 vue 脚手架 2. 创建项目 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1.安装 vue 脚手架 2.创建项目 3.引入 bimface 响应的文件 4.修改 App.vue 文件,实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令,全局安装 vue 脚手架工具 npm install -g @vue/cli 安装好之

  • Vue中的事件处理详情

    Vue中的事件处理详情

    目录 一.事件处理 二.事件修饰符 三.键盘事件 使用技巧 一.事件处理 给按钮绑定一个 click 事件,点击弹出提示信息 <!--普通写法--> <button v-on:click="showInfo">点我</button> <!--简写--> <button @click="showInfo">点我</button> new Vue({ el:'#root', methods:{ sh

  • MVC+EasyUI+三层新闻网站建立 详情页面制作方法（八）

    MVC+EasyUI+三层新闻网站建立 详情页面制作方法（八）

    MVC新闻网站建立,完成详情页面的制作. 详情就是点击详情后弹出一个div,所以需要现在boby里面先建立一个div <div id="detailDiv"> <table> <tr> <td>标题:</td> <td><input class="easyui-textbox" style="width:250px;height:32px" id="title

随机推荐