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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 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
杏林同学录(三)
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
初一新生军训方案
2014/05/22 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
使用CSS连接数据库的方式
2022/02/28 HTML / CSS