vue2使用keep-alive缓存多层列表页的方法

vue关于列表页和详情页的展现比较让人头疼，在列表页面点击进详情页返回以后，列表页会重新刷新。假如在第五页找到的数据，点击修改后返回又跳回第一页了，这个时候就需要用到keep-alive缓存页面数据，但keep-alive缓存的页面一直不会发生改变，特别是列表页层级很多的情况下，更加复杂。

譬如我后台的一个管理页面，因为数据关联很复杂，所以做了三层列表页嵌套，上一层点击管理就可以进行下一层的数据展现，每一层列表页都包含了3到4个需要循环展现的数据。在加入keep-alive之前我使用路由和自定义组件的方式组织页面的。

路由到详情页，然后详情页加载列表页组件展现，然后在组件模块通过props:[‘id']获取数据

import Vmothod from '../page/ApiMethodTable.vue';
import VsystemParam from '../page/ApiSystemParamTable.vue';
import VsystemError from '../page/ApiSystemErrorTable.vue';
<template>
 <div>
  <Vmothod :id="id"></Vmothod>
  <VsystemParam :id="id"></VsystemParam>
  <VsystemError :id="id"></VsystemError>
 </div>
</template>

但是如此以来，在返回上一层或者修改数据回跳后，因为没有页面缓存，所以页数会变成第一页，使用上很不方便。

在网上找了相关解决方案后，我试着在路由上加入了keep-alive参数。

meta: { keepAlive: true }
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

这样解决了页面不缓存的问题，但跳转之后所有页面都是一模一样的数据，这就很不对了。后台发觉还要在页面初始化时加入钩子函数拉取数据

 activated(){
  this.getData();
 }

但是发觉还是不行，上一页通过props:[‘id']传递到组件参数也会被缓存，如此以来props不能用了，只有通过在路由来传递参数。

在路由的时候带上id参数

path:'/method/:id'

然后在组件页面获取参数

self.$route.params.id

如此终于顺畅的缓存了详情页的当前页面参数。

以上这篇vue2使用keep-alive缓存多层列表页的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue keep-alive请求数据的方法示例

    背景 index页面:首页品牌入口 list页面:商品列表页面 product页面:商品详情页面 从index页面进入list的时候要刷新页面,从product页面返回list的时候不需要刷新页面,所以list使用了keep-alive的属性,keepAlive设置为true,但是开发过程中发现一个问题,从product返回到list的时候,列表页面不是正确的品牌列表,而是之前一次点击的品牌列表.由于每个人遇到关于keep-alive请求数据不正确的问题不同,这里就直接说我的解决办法.希望能给大

  • vue解决使用webpack打包后keep-alive不生效的方法

    问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下: var menus = [ { path: '/user', name: '用户', component: '/user', redirect: '/user/index1', icon: 'fa-bandcamp', meta: { keepAlive: false }, children:

  • Vue中 key keep-alive的实现原理

    vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 keep-aliv是Vue.js的一个内置组件.它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中. 它有两个生命周期: activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性,允许组件有条件地进行缓存. keep-a

  • vue 使某个组件不被 keep-alive 缓存的方法

    提出问题 最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题 这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周

  • 基于vue中keep-alive缓存问题的解决方法

    vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用

  • 详解关于Vue2.0路由开启keep-alive时需要注意的地方

    Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好. keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件

  • vue 中的keep-alive实例代码

    Vue 实现组件信息的缓存 当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载. 一.在app.vue里 <keep-alive> <router-view></router-view> </keep-alive> 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果. 那么我们给部分组件加上,实现方法如下:

  • vue.js内置组件之keep-alive组件使用

    vue.js内置组件之keep-alive组件使用

    keep-alive是Vue.js的一个内置组件.<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 它提供了include与exclude两个属性,允许组件有条件地进行缓存. 举个栗子 <keep-alive> <router-view

  • 解决vue keep-alive 数据更新的问题

    在项目中使用<keep-alive>包含<router-view>实现页面缓存,加速页面加载, 同时,这种方式带来一些弊端,请看如下大神解释: *********************************** 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated. 当再次进入(前进或者后退)时,只触发activated. ********************

  • vue中进入详情页记住滚动位置的方法(keep-alive)

    > 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <

  • vue中keep-alive的用法及问题描述

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"&g

随机推荐