vue路由里前进后退的那些事儿

栏目: JavaScript · 发布时间: 5年前

内容简介:最近蒸煮在做一个独立项目的时候遇到了一个小坑,特此做个爬坑纪念。基本情景是页面之间通过vue路由跳转,从页面A跳转到页面B(在页面B进行对应操作后),再从页面B跳转到页面C。之后再从页面C返回到页面B,页面B保留之前状态,返回页面A,页面B状态不保留。(。・∀・)ノ゙嗨~感觉说的好乱。总之就是,

最近蒸煮在做一个独立项目的时候遇到了一个小坑,特此做个爬坑纪念。

基本情景是页面之间通过vue路由跳转,从页面A跳转到页面B(在页面B进行对应操作后),再从页面B跳转到页面C。之后再从页面C返回到页面B,页面B保留之前状态,返回页面A,页面B状态不保留。(。・∀・)ノ゙嗨~感觉说的好乱。

总之就是, 前进刷新,后退不刷新(刷新是指是否重新渲染)

相信很多小伙伴都会想到用keep-alive开启缓存页面来实现,鹅,蒸煮也没例外,下面就是蒸煮的爬坑过程。

vue路由开启keep-alive缓存页面

keep-alive是vue官方提供的一种缓存组件实例的方法。

  • 第一步,先改写<router-view>的展示方式
    <keep-alive>
    //这是会被缓存的页面
        <router-view v-if="$route.meta.keepAlive">
        </router-view></keep-alive>
    <router-view v-if = "!$route.meta.keepAlive">
    //这里是不被缓存的组件
    </router-view>复制代码
  • 第二步,在路由配置文件里,配置组件是否被缓存
    routes:[
        {      path: '/',   
               name: 'Index',    
               component: Index,     
               meta:{    
                    title:"博物馆",     
                    keepAlive:false//不缓存   
               }   
              },  
              {    
                path:'/searchMain', 
                name:'SearchMain',  
                component:SearchMain,  
                meta:{    
                    title:"搜索",    
                    keepAlive:true,//缓存   
                      }  
              },
             {    
               path:'/collectionDetails',  
               name:'CollectionDetails',  
               component:CollectionDetails,   
               meta:{      
                    title:"藏品详情",   
                    keepAlive:false,//不缓存   
                    }  
             }]复制代码

这样的话无论什么时候,缓存的组件一直会被缓存

  • 第三步,根据路由钩子来改变缓存组件的状态
beforeRouteLeave(to, from, next) {  
      if(to.path="首页"){
          from.meta.keepAlive =false;
      }else if(to.path="详情页"){
      from.meta.keepAlive = true;
      }   //  跳转到 首页时,不缓存,跳转到详情页时缓存(就是不刷新)  
      next();
      }
这种行吗?行吗?行吗?不行!!因为第一次的时候确实会成功,可是退出去以后就gg了,
因为keepAlive已经变成了false,第二次就不会缓存。那么第一个页面加下面代码,让他进入的时候
  beforeRouteLeave(to, from, next) {  
      if(to.path=="/searchMain"){    
       to.meta.keepAlive =true;      
        }    
       next(true);    
   return;  
},复制代码

实践证明,搜索界面的数据一直是第一次缓存过的数据。

二,为了解决这个问题,蒸煮想起了keep-alive组件相关的两个钩子函数。

activated :缓存的组件再次进入时触发;

deactivated :缓存的组件离开时会触发;

第一次进入keep-alive组件时,其生命周期执行顺序:

beforeRouteEnter ->created ->mounted ...->activated ->deactivated复制代码

非首次进入时,其生命周期执行顺序

beforeRouteEnter ->activated  ->deactivated复制代码

第二次进入的时候vue组件的生命周期函数都没有执行,说明缓存组件也无法销毁。更无法更新。

解决方法

activated() {
   if(!this.$route.meta.isBack) {
     // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据      this.getData(); // ajax获取数据方法
    }
    // 恢复成默认的false,避免isBack一直是true,导致下次无法获取数据
    this.$route.meta.isBack = false
},复制代码

但素,重新换取数据,之前保存在data里的数据并没有变,感觉还是不太彻底!

终极解决方案

最后终于到答案的最后一步啦

那就是动态给要缓存的路由组件添加key值啦~

<keep-alive>
          <router-view v-if="$route.meta.keepAlive" :key='key'></router-view>
</keep-alive>
          <router-view v-if="!$route.meta.keepAlive" :key='key'></router-view>复制代码

在vuex中有条件改变key的值

beforeRouteLeave(to,from,next){
    if(to.path=="/"){
        this.$store.commit("UPDATE_KEY",this.$route.name!==undefined?this.$route.name+
        +new Date():this.$route+ +new Date());
    }
}复制代码

这样的话就会有一个很重要的问题,这些缓存过的组件,都是在内存中的,如果一直操作,内存堆积越来越大,导致系统卡顿。所以离开时就 销毁

手动触发销毁

beforeRouteLeave(to,from,next){
    if(to.path=="/"){
        this.$store.commit("UPDATE_KEY",this.$route.name!==undefined?this.$route.name+ +new Date():this.$route+ +new Date());
                 this.$destroy();//销毁吧
}复制代码

结语 :写完了,希望能够供大家参考哦!


以上所述就是小编给大家介绍的《vue路由里前进后退的那些事儿》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

硅谷热

硅谷热

埃弗雷特.M.罗杰斯 / 范国鹰 等 / 1985.8 / 经济科学出版社 / 1.9

《硅谷热》总共分三部分。第一部分为“硅谷的崛起”,以苹果电脑的传奇故事为主线,讲述了硅谷的发展历史。第二部分为“高技术文明”,从风险投资、创业故事、人物传奇等各个方面描绘了硅谷的生态状况。第三部分为“硅谷的明天”,讲述了硅谷模式在全球的扩散、硅谷面临的全球竞争和深远影响。 书中,硅谷这场传奇的主要角色:人物、公司、技术、产品等都综合在其中,一锅子端给了嗷嗷待哺的人们:PC革命、半导体传奇、软......一起来看看 《硅谷热》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具