精华内容
下载资源
问答
  • vue使用keepAlive

    2020-12-02 15:43:11
    vue使用keepAlive保留页面历史状态,避免重复渲染。 首先记录一下本次使用keepalive组件实现的功能:从指定页面返回时保留上次浏览及选择状态。 首先在app.vue中 <div id="app"> <keep-alive> <...

    vue使用keepAlive保留页面历史状态,避免重复渲染。

    首先记录一下本次使用keepalive组件实现的功能:从指定页面返回时保留上次浏览及选择状态。

    首先在app.vue中

     <div id="app">
      	<keep-alive>
          <router-view v-if="$route.meta.keepAlive" :key="key" />
        </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" :key="key" />
      </div>
    

    使用keepAlive组件将router-view包裹住,通过route.meta中的keepAlive来判断是否进行保留状态。那路由中想要保留状态的页面需要加上这个标识:

    {
            path:'/operMainNewleftdetail',
            name:'运行中心-规格明细',
            component: operMainNewleftdetail,
            meta:{
            	keepAlive: true
            }
    

    但此时不管从任何路径进入此A页面都会保留上次的状态,而我这里=指向从B进入A是保留状态,其他页面进入A时重新渲染,那次是需要在A页面的vue文件中做路由判断:

    beforeRouteLeave(to,from,next){
    			//当从A访问页面B时,此时A页面开启页面保存
    	    	if(to.path == '/B'){
    	    		if(!from.meta.keepAlive){
    	    			from.meta.keepAlive = true;
    	    		}
    	    		next();
    	    	}else{
    	    	//如果是进入其他页面则不保存,且摧毁页面再次进入需要渲染。
    	    		from.meta.keepAlive = false;
    	    		this.$destroy();
    	    		next();
    	    	}
    	    }
    

    还有比较重要的一点,我目前也不是很理解的一点,因为一般页面保存返回的时候就不会有mounted了,所以很可能造成A页面的子组件无值报错的情况:
    这里建议加上actived:
    **activated():**在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。

    	//页面的子组件靠mountd进行初始化的话
        mounted() {
          this.initData();
        },
        //进行页面数据的初始化,否则子组件可能因为没有数据会报错。
        activated(){
          this.initData();
        }
    

    最后页面的停留位置也是靠路由来判断,在main.js中进行就可以

    router.beforeEach((to, from, next) => {
      if(to.meta.keepAlive){
    	  next();
      }else{
    	  window.scrollTo(0,0);//切换路由自动滚动到顶部
    	  next();
      }
      
    });
    
    展开全文
  • vue使用keepAlive实现前进后退功能

    千次阅读 2018-10-23 14:06:44
    vue使用keepAlive实现前进后退功能 ** vuekeepAlive可以实现缓存组件的数据,避免后退时重新加载数据。(其实说白了,功能就是前进刷新,后退不刷新,还要保留之前浏览的位置) 假设有ABC三个页面,对b页面按...

    **

    vue使用keepAlive实现前进后退功能

    **
    vue的keepAlive可以实现缓存组件的数据,避免后退时重新加载数据。(其实说白了,功能就是前进刷新,后退不刷新,还要保留之前浏览的位置)
    **

    写得非常乱,不想看的,想知道代码的直接看末尾

    **

    假设有ABC三个页面,对b页面按官网教程使用了keepAlive,c页面退回b页面,很好,没有重新请求数据,也返回了之前的浏览位置,但退回到A页面后,重新点击进入b页面,数据没有更新,还是原来的数据,(组件重用的情况下,这个问题更加严重,只有一个组件还好点,数据不刷新,人家可能也没啥感觉,但组件重用,人家点击的明明是不同板块,但显示的全是第一次点击的数据)
    这里不多说一些重复的东西,要解决这个问题,必须要清楚了解vue在使用了keepAlive后的生命周期,设置了keepAlive缓存的组件:

       第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated
    
       后续进入时:beforeRouterEnter ->activated->deactivated
    

    可以看出,只有第一次进入该组件时,才会走created钩子,而需要缓存的组件中activated是每次都会走的钩子函数。
    我第一次实现这个功能是按照这个教程改的,但我觉得还不够简洁,所以自己重新琢磨了一下
    不想写太多了,重复的东西写了也没多大用处,在我试着简洁我的代码的时候,让我发现个奇怪的事情,就是当列表组件给重用的时候,beforeRouteLeave只会在第一次点击进去的那个路由地址里面点击前进或者后退时,beforeRouteLeave里面的代码才会触发,其它路由地址使用这个组件并不会触发这个beforeRouteLeave里面的代码,所以我只好在watch里面监听路由是否已经改变来执行代码了
    第一种方案。我现在用的
    方案好处是只在B页面和路由里有设定,A和C不需要另写代码,这样关联就没那么多,但代码逻辑的话理解上就比较困难一些,路由里面只启用了keepAlive:true
    B页面

    data() {
    			return {
    				newsList: [],
    				firstEnter:true,
    			}
    		},
    created(){
    			this.firstEnter = false;
    			this.getNewList();
    		},
    		watch:{
    			"$route":function(to,from){
    				if(to.meta.tree == 0) {//后退,tree 0为A页面,1为B页面,2为C页面
    					this.firstEnter = true;
    				}
    			}
    		},
    		activated() {
    		    if(this.firstEnter){           
    		    	this.firstEnter = false;
    		    	....// 清空原有数据
    		        this.newsList = []; // 清空原有数据,初始化
    		        this.getNewList(); // 这是我们获取数据的函数
    		    } 
    		},
    		//使用keepAlive后,触发顺序,第一次进入created->activated,所以路由文件对应的keepAlive为true,不然无法激活activated组件,
    		//created获取数据操作后要立马将firstEnter设为false,避免后续执行activated时重复获取数据
    		//所以第一次要在created里面获取一次数据,因为activated主要是为了第二次以后更新数据用的
    		//第二次进入组件,不会触发created,直接触发activated,所以activated里面的firstEnter要为true,不然为false意味操作不是前进操作,不会重新获取数据
    		//watch里面的意思是如果是返回上一页则初始化firstEnter,避免后续进入其它路由地址不更新数据
    

    第二种方案,就是链接的方案
    路由命名两个属性,一个keepAlive为true, 一个为isUseCache为false
    好处是相对容易理解,但逻辑有点过于分散
    A页面

    beforeRouteLeave(to, from, next) {
    	      if (to.meta.tree==1) {
    	         to.meta.isUseCache = false; 
    	      } 
    	      next();
    	    }
    

    B页面

    activated() {
    		    if(!this.$route.meta.isUseCache){            
    		        this.newsList = []; // 清空原有数据
    		        this.beginNum = 1;
    		        this.getNewList(); // 这是我们获取数据的函数
    		    } 
    		},
    

    其实原理都是一样的,第一个方案只是变个法子,把路由的isUseCache改成了组件内部的firstEnter
    第一个方案流程图
    在这里插入图片描述
    第二个方案流程图
    在这里插入图片描述

    写的非常乱,总结一句话就是直接抄这个就行,没那么多弯弯道道

    data() {
    			return {
    				newsList: [],
    				firstEnter:true,
    			}
    		},
    created(){
    			this.firstEnter = false;
    			this.getNewList();
    		},
    		watch:{
    			"$route":function(to,from){
    				if(to.meta.tree == 0) {//后退,tree 0为A页面,1为B页面,2为C页面
    					this.firstEnter = true;
    				}
    			}
    		},
    		activated() {
    		    if(this.firstEnter){           
    		    	this.firstEnter = false;
    		    	....// 清空原有数据
    		        this.newsList = []; // 清空原有数据,初始化
    		        this.getNewList(); // 这是我们获取数据的函数
    		    } 
    		},
    		
    
    展开全文
  • vuekeepAlive的使用

    2020-07-19 10:47:45
    vuekeepAlive的使用 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是...

    vue中keepAlive的使用

    在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.

    keep-alive 简介

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
    用法也很简单:

    <keep-alive>
      <component>
        <!-- 该组件将被缓存! -->
      </component>
    </keep-alive>
    
    props
    • include - 字符串或正则表达,只有匹配的组件会被缓存
    • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
    // 组件 a
    export default {
      name: 'a',
      data () {
        return {}
      }
    }
    
    <keep-alive include="a">
      <component>
        <!-- name 为 a 的组件将被缓存! -->
      </component>
    </keep-alive>可以保留它的状态或避免重新渲染
    
    <keep-alive exclude="a">
      <component>
        <!-- 除了 name 为 a 的组件都将被缓存! -->
      </component>
    </keep-alive>可以保留它的状态或避免重新渲染
    

    但实际项目中,需要配合vue-router共同使用.
    router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:

    <keep-alive>
        <router-view>
            <!-- 所有路径匹配到的视图组件都会被缓存! -->
        </router-view>
    </keep-alive>
    

    如果只想 router-view 里面某个组件被缓存,怎么办?

    增加 router.meta 属性
    // routes 配置
    export default [
      {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
          keepAlive: true // 需要被缓存
        }
      }, {
        path: '/:id',
        name: 'edit',
        component: Edit,
        meta: {
          keepAlive: false // 不需要被缓存
        }
      }
    ]
    
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
            <!-- 这里是会被缓存的视图组件,比如 Home! -->
        </router-view>
    </keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件,比如 Edit! -->
    </router-view>
    
    展开全文
  • vuekeepAlive

    2017-12-26 10:12:00
    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件。 keep-alive的介绍如下: 1,把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染...

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件。

    keep-alive的介绍如下:
    1,把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染
    2、<keep-alive>是抽象组件,它自身不会渲染DOM元素,也不会出现在父组件链中。
    3、当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
    注:在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。
     
    使用方法包括以下几种:
     
    1)基本用法:使用keep-alive直接包裹组件
       <keep-alive>
           <component :is="view"></component>
       </keep-alive> 
       <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
       如果需要缓存整个项目,则如下设置:
       <keep-alive>
          <router-alive> </router-view>
       </keep-alive>
     
    2)缓存部分页面或者组件,使用route.meta属性
         在App.vue中改造如下
        <keep-alive>
           <router-view v-if="$route.meta.keepAlive"></router-view>
       </keep-alive>
       <router-view v-if="!$route.meta.keepAlive"></router-view>
     
        项目中router中缓存页面路由设置:
        {
            name: 'category',
            path: '/tingshu/category',
            component: Category,
            meta: { keepAlive: true }
        } 
        //Category组件使用keep-alive,将保存在内存中。
     
    3)使用新增属性include/exclude
         vue2.1.0 新增了include,exclude俩个属性,允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
        <!-- 逗号分隔字符串 -->
        <keep-alive include="a,b">
             <component :is="view"></component>
        </keep-alive>
     
        <!-- 正则表达式 (使用 `v-bind`) -->
        <keep-alive :include="/a|b/">
            <component :is="view"></component>
        </keep-alive>
     
        <!-- 数组 (使用 `v-bind`) -->
        <keep-alive :include="['a', 'b']">
            <component :is="view"></component>
        </keep-alive>
       匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
       
    4)动态判断,使用v-bind:include
        <keep-alive :include="includedComponents">
            <router-view></router-view>
        </keep-alive>
     includedComponents动态设置即可  
     
    5)使用beforeRouteLeave或者afterEach中进行拦截处理
         如在项目在Category组件中的设置:
          

         在beforeRouteLeave中to.name根据具体的路由进行动态缓存设置。 

     

    keep-alive的基本介绍完毕,如有纰漏还请多指教。

    转载于:https://www.cnblogs.com/nokelong/p/8116631.html

    展开全文
  • 关于vuekeepAlive页面缓存 条件:路由导航得在路由router.vue中 本人初次在项目中实操无误区: 1、不能明确导航位置也就是上面所说的条件,一般这个路由导航是写router.vue中,意思是路由渲染前,就会通过router....
  • vue——keepAlive第一次无效问题及解决方法
  • vuekeepAlive使用

    2020-06-01 14:33:49
    使用$route.meta的keepAlive属性: <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></...
  • vue 使用 keepAlive

    千次阅读 2018-12-13 16:32:57
    2. 将需要缓存的页面在路由配置的meta中写上keepAlive: true,不需要缓存的就不用写 3. 有的页面需要缓存,有的页面不需要缓存,所以需要做判断。需要使用第二种方法,因为第一种方法在第一次进入页面的时候keep-a...
  • vue-keepAlive-template.rar

    2019-07-17 16:54:58
    基于vue-cli3.0版本,用keep-alive组件实现案例: (1)'表单'跳转'阅读活动协议页'再返回 缓存表单数据 (2)'信息列表'跳转'列表详情页'再返回 缓存列表滚动位置
  • Vue3-KeepAlive`Vue3`的生命周期未添加keepAlive的生命周期添加keepAlive的生命周期在`VueApp`中配合`vue-router`使用`keepalive` Vue3的生命周期 未添加keepAlive的生命周期 beforeCreate=>created=>...
  • 1. vuekeepAlive组件缓存  keepAlive很轻松的就能够实现组件之间的缓存,主要还是返回其DOM不让数据重新刷新。当使用了keepAlive之后,页面第一次进入,钩子的触发顺序created->mounted->activated,退出...
  • keepAlivevue动态组件中keepAlive中的使用,路由全局守卫,keepAlive组件量身定制的钩子。 项目中使用keepAlive可以主流程缓存优化,主流程页面(组件)切换时保持之前加载的状态,避免反复渲染影响页面性能,...
  • Vue设置keepAlive不生效问题

    千次阅读 2020-12-29 11:42:19
    如演示,Vue页面导航回退后页面重新刷新了,搜索条件及结果都重置了,对于页面需要频繁切换的系统来说,体验不佳,我们希望页面第一次打开时加载,此后回退不再...router-view v-if="$route.meta.keepAlive">&l..
  • vuekeepAlive实现缓存

    2020-05-26 22:24:08
    当时,对vue认识更加浅显,直接就是给每个页面都起一个名字(该名字与组件名字相同)储存在本地,然后根据watch监听,当输入框有输入的时候就把记录存在本地。监听路由,当关闭该标签的时候再清空路由。每当页面...
  • 总所周知,我们在vue使用keepAlive实现缓存时有相关场景不一定都要缓存,例如: A页面 (name) = pageA ,B页面(name)= pageB , pageA -> pageB -> pageA (返回到的A页面需要缓存) pageA -> pageB ->...
  • keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存 基本使用 上面提到被keepalive包含的组件不会被再次init,也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景...
  • VUEkeepAlive结合路由判断页面是否需要刷新 在vue项目中我们经常需要判断路由是从哪个页面跳转过来的,以便判断当前页面是否需要刷新 结合beforeRouteEnter beforeRouteEnter (to, from, next) { if (!from....
  • vuekeepAlive缓存清除的问题

    千次阅读 2020-06-10 10:12:16
    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便。但是遇到一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了。 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <...
  • 在开发中经常有从列表跳到详情页,然后返回详情页的...1、首先在路由中的meta标签中记录keepAlive的属性为true path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'),
  • vuekeepAlive组件的作用及使用方式

    万次阅读 多人点赞 2019-04-18 15:22:42
    在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗? keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的...
  • vuekeepAlive注意事项

    千次阅读 2018-11-22 17:48:20
    问题描述: 今天在测试提到了一个bug,当重复进入相同的组建的时候,mounted和created内的方法不触发,导致页面展示不一样 原因: &lt;keep-alive&gt; 包裹动态组件时,会缓存不活动的组件实例,而不是...
  • vue组件keepAlive的使用

    2018-09-25 20:06:00
    app.vue --> < keep-alive :include ="$store.getters.catchPages" > < router-view v-if ="$route.meta.keepAlive" > router-view > keep-alive > < router-view v-if ="!$route.meta.keepAlive" > ...
  • vuekeepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/... 什么是keepalive 我们平时开发中, 总有部分组件没有必要多次init, 我们需要将...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,346
精华内容 2,538
关键字:

vue3keepalive

vue 订阅