vue路由中前进后退的一些事儿


Posted in Javascript onMay 18, 2019

前言

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

基本情景是页面之间通过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();//销毁吧
}

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 #Javascript
微信小程序云开发 生成带参小程序码流程
May 18 #Javascript
详解小程序开发经验:多页面数据同步
May 18 #Javascript
JavaScript实现星级评价效果
May 17 #Javascript
JavaScript实现美化滑块效果
May 17 #Javascript
vue中使用mxgraph的方法实例代码详解
May 17 #Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
You might like
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
python正则分组的应用
2013/11/10 Python
python实现统计代码行数的方法
2015/05/22 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python中 map()函数的用法详解
2018/07/10 Python
Python实现八皇后问题示例代码
2018/12/09 Python
flask应用部署到服务器的方法
2019/07/12 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python实现打印实心和空心菱形
2019/11/23 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
自我评价优秀范文分享
2013/11/30 职场文书
矿泉水广告词
2014/03/20 职场文书
文明市民先进事迹
2014/05/15 职场文书
车间安全生产标语
2014/06/06 职场文书
高中学生自我评价范文
2014/09/23 职场文书
抗洪救灾标语
2014/10/08 职场文书
新闻人物通讯稿
2014/10/09 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2015年教师国培感言
2015/08/01 职场文书