码迷,mamicode.com
首页 > 其他好文 > 详细

vue利用keep-alive / beforeRouteLeave 前进刷新后退不刷新 ,亲测可用。

时间:2021-01-14 10:31:16      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:更新   OLE   sse   keepaliv   orm   sid   activate   config   ack   

在vue中默认router-link进入页面组件都是不缓存的。对于数据不会更新的页面。可以使用keep-alive来缓存以提高性能。
在项目src/router/index.js中。对于需要缓存的路由加meta中加上keepAlive: true
技术图片
1 export default new Router({
2   routes: [
3     {path: ‘/‘,
4       redirect: ‘/Home‘,
5       meta: {keepAlive: true,}
6     },
7 ]
8 })
技术图片

在app.vue中

技术图片
1 把
2 <router-view></router-view>
3 改为
4 <keep-alive>
5       <router-view v-if="$route.meta.keepAlive"></router-view>
6 </keep-alive>
7 <router-view v-if="!$route.meta.keepAlive"></router-view>
8     
技术图片

 



利用beforeRouteLeave动态决定要不要缓存刷新。

要求:

首页Home-列表页List-详情页Detail。前进刷新,后退不刷新,且还在原来的滚动位置。

即除了在详情页退到列表页不刷新外,其他方式(搜索、分类、推荐等)进入列表都刷新。

在router/index.js中,Llist路由加上keepAlive: true, 

 
技术图片
{
      path: ‘/list/:categoryId?/‘,
      name: ‘List‘,
      component: List,
      meta: {
        keepAlive: true, 
},
{
      path: ‘/detail/:goodsId‘,
      name: ‘Detail‘,
      component: Detail
}
技术图片

 

在vue中 
 beforeRouteLeave (to, from, next) { }
 表示在路由页面离开时执行。
其中to表示下一个要进入的路由。form表示当前页面路由。next()表示执行跳转。
我们只需要在函数中判断,只要下一级是Detail则把List的keepAlive设为true,其他设为false即可。
技术图片
beforeRouteLeave(to, from, next) {
        console.log(‘beforeRouteLeave  to.path=‘+to.path + ‘ from.path=‘+from.path);
        if(to.path.indexOf(‘/dataAssets/maintain/edit/‘) > -1 || to.path.indexOf(‘/dataAssets/maintain/details/‘) > -1 ){
            this.$route.meta.isBack = true;
        }else{
            this.$route.meta.isBack = false;
        }
        next()
    },
    
    activated() {
        console.log(‘activated this.$route.meta=‘+ JSON.stringify( this.$route.meta) )
        if(!this.$route.meta.isBack){
            this.pageConfig.currentPage = 1;
        }
        this.getList(this.pageConfig.currentPage);
        
    },
技术图片
 
 
 
 
根据 this.$route.meta.isBack 来判断是不是返回的状态,如果是,就缓存页码,如果不是,就请求第一页。

vue利用keep-alive / beforeRouteLeave 前进刷新后退不刷新 ,亲测可用。

标签:更新   OLE   sse   keepaliv   orm   sid   activate   config   ack   

原文地址:https://www.cnblogs.com/yuer01/p/14267944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!