vue使用keep-alive实现组件切换时保存原组件数据方法

2024-09-28 17:45:29

前言

最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现。

问题：但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败。

追求效果：想利用keep-alive实现上传组件切换时仍继续上传文件，而其他组件则不会存活。

使用keep-alive的过程

普通方法：直接使用keep-alive

<keep-alive>
 <router-view />
</keep-alive>

效果：虽然能使上传文件组件存活，在切换组件时仍可继续上传

问题：其余各个组件都不会销毁和重新挂起，导致所有组件的内容不会更新

更好一点的方法：配置路由加以判断是否适用keep-alive

路由js：

//ManageFiles组件需要重新挂起刷新数据，而ManageUploadFile为上传文件组件，故想之存活
{
 path:'files',
 name:'ManageFiles',
 component: () => import('../pages/course/manage/resource/files/Files'),
},
{
 path:'uploadfile',
 name:'ManageUploadFile',
 meta:{
 keepAlive:true  //是否存活标志
 },
 component: () => import('../pages/course/manage/resource/files/UploadFile'),
},

切换组件：

<template>
 <div class="manageResource">
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" />
 </div>
</template>

效果图：

（1）一开始为File组件，mounted()打印'我是File'

（2）第一次切换为UploadFile组件，mounted()打印'我是UploadFile'

（3）再次切换回File组件，mounted()再次重新打印'我是File'

（4）最后再次切换回UploadFile组件，因为它一直存活，所以不会重新触发mounted()再次重新打印'我是UploadFile'

补充知识：vue 动态组件（tabs切换）keep-alive：主要用于保留组件状态或避免重新渲染

通过keep-alive 保留数据值填写数据时切换到其他页面，后返回当前页数据保留，主要用于保留组件状态或避免重新渲染

 <!--动态组件-component使用-->
 <div class="app">
 <ul>
 <li @click="currView='home'">首页</li>
 <li @click="currView='abount'">关于我们</li>
 </ul>
 <!--通过keep-alive 保留数据值 填写数据时切换到其他页面，后返回当前页数据保留-->
 <keep-alive>
 <component :is="currView"></component>
 </keep-alive>
 </div>

<script type="text/x-Template" id="homeTemp">
  <h2>首页数据</h2>
</script>
<script type="text/x-Template" id="abountTemp">
  <h2>关于我们数据<input type="text"/></h2>
</script>

<script type="text/javascript">
 var vm=new Vue({
 el:'.app',
 data:{
  currView:"home"
 },
 components:{
  "home":{
   template:"#homeTemp"
  },
  "abount":{
  template:"#abountTemp"
  }
 }
 });

</script>

以上这篇vue使用keep-alive实现组件切换时保存原组件数据方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

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

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

一.在我们使用vue进行开发的过程中,可能会遇到一种情况: 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法二.Vue.set() 响应式新增与修改数据此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set 调用方法:
vue里如何主动销毁keep-alive缓存的组件

问题产生的背景我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境这个项目是基于一个开源 vue
详解keep-alive + vuex 让缓存的页面灵活起来

引入在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载.如下图: 细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理. keep-alive实现页面缓存我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法: 方法一: 首先在定义路由的时候配置 meta 字段,自定义一个Keep
vue使用keep-alive实现组件切换时保存原组件数据方法

前言最近在做一个精品课程后台管理系统,其中涉及文件上传和文件列表展示,我不想将他们写入一个组件,故分开两个组件实现. 问题:但由于上传文件需要时间,这时要是用户切换别的组件查看时,上传文件组件就销毁了,导致文件上传失败. 追求效果:想利用keep-alive实现上传组件切换时仍继续上传文件,而其他组件则不会存活. 使用keep-alive的过程普通方法:直接使用keep-alive <keep-alive> <router-view /> </keep-alive>
Android输入法与表情面板切换时的界面抖动问题解决方法

昨天琢磨了下Android的输入法弹出模式,突然发现利用动态切换输入法的弹出模式可以解决输入法抖动的问题.具体是怎样的抖动呢?我们先看微博的反面教材. [具体表现为:表情面板与输入法面板高度不一致,从而导致弹出输入法(layout被挤压)时,同时又需要隐藏表情面板(layout被拉升),最终让界面产生了高度差抖动,所以在切换时明显会有不大好的抖动体验)] 使用了解决抖动的解决方案后,效果如下: [这样的方案明显比微博的切换更平滑] 老样子,先说思路.主要我们要用到两个输入法弹出模式,分别是:ad
Java 将PDF转为HTML时保存到流的方法和步骤

本文介绍如何通过Java后端程序代码将PDF文件转为HTML,并将转换后的HTML文件保存到流.在实现转换时,可设置相关转换属性,如:是否嵌入SVG.是否嵌入图片等.下面是实现转换的方法和步骤: 1. 导入jar包本次转换的方法通过导入Free Spire.PDF for Java中的Spire.Pdf.jar免费jar来实现.可按照如下两种方法中的任意一种导入jar: 方法1:从Maven仓库中导入.在pom.xml中配置如下内容: <repositories> <repositor
解决vue加scoped后就无法修改vant的UI组件的样式问题

有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可
Flutter实现页面切换后保持原页面状态的3种方法

前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果第一步:实
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表瀑布流滚动加载,用于控制长列表的展示当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载完成后就不会自动加载一次了 ) 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发
Vue路由切换时的左滑和右滑效果示例

如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <
Vue 路由切换时页面内容没有重新加载的解决方法

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t
Vue-router 切换组件页面时进入进出动画方法

App.vue 代码 <template> <div id="app"> <Header></Header> // 用transition 把切换组件页面的容器包含 <transition name="slide-fade"> <router-view></router-view> </transition> </div> </template>
Vue解决echart在element的tab切换时显示不正确问题

最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的就是在页面加载时,就对图表进行初始化. 网上的解决方案大多都是监听tab的切换事件,然后再根据切换的页面重新渲染echart组件,比较麻烦. 如下是个人的解决方法: 原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab 举例如下: <el-tab

vue使用keep-alive实现组件切换时保存原组件数据方法

相关推荐

随机推荐