vue实现前进刷新后退不刷新效果


Posted in Javascript onJanuary 26, 2018

最近在用vue尝试着做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新。

由于 keep-alive 会把所有加载的过的界面都缓存起来,没法实现返回时将界面销毁掉,导致再进入时没有重新加载这个界面。于是首先想到的方案是在点击界面上返回按钮的时候,调用 this.$destroy(true) 来将界面销毁掉。但是在移动端 android设备上会有物理返回键,如果通过物理返回键返回的话,就没法处理了。虽然可以重写android的返回事件,来调用js的方法,但是调用的是js的全局方法,没法具体让在最上层的那个界面销毁掉。

于是就需要另辟蹊径了。还好这篇文章给了我启发 vue-router 之 keep-alive ,多谢作者的分享。

要是能够知道路由是前进还是后退就好了,这样的话我就能在后退的时候让 from 路由的 keepAlive 置为 false , to 路由的 keepAlive 置为 ture ,就能在再次前进时,重新加载之前这个 keepAlive 被置为 false 的路由了。

废话不多说了,这里模拟有三个界面 login 到 server 到 main 。

首先我给这三个界面路由的 path 设置了严格的层级关系 ,并设置keepAlive都是true,默认都是需要缓存。

const router = new Router({
 routes: [
  {
   path: '/',
   redirect: '/login'
  },
  {
   path: '/login',
   component: Login,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server',
   component: ServerList,
   meta: {
    keepAlive: true
   }
  },
  {
   path: '/login/server/main',
   component: Main,
   meta: {
    keepAlive: true
   }
  }
 ]
})

由于这三个界面path的层级不同,我就能通过 beforeEach 这个钩子判断出什么时候是后退了。在后退时将 from 路由的 keepAlive 置为 false , to 路由的 keepAlive 置为 ture 。

router.beforeEach((to, from, next) => {
 const toDepth = to.path.split('/').length
 const fromDepth = from.path.split('/').length
 if (toDepth < fromDepth) {
  console.log('后退。。。')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
 }
 next()
})

最后需要缓存的界面用 keep-alive 包起来,就能实现时前进刷新,后退时不刷新的效果了。

<keep-alive>
     <router-view v-if="$route.meta.keepAlive">
      <!-- 这里是会被缓存的视图组件 -->
     </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
     <!-- 这里是不被缓存的视图组件 -->
    </router-view>

总结

以上所述是小编给大家介绍的vue实现前进刷新后退不刷新效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 #Javascript
微信小程序实现图片压缩功能
Jan 26 #Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 #Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 #Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
利用js给datalist或select动态添加option选项的方法
Jan 25 #Javascript
You might like
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Python模块常用四种安装方式
2020/10/20 Python
护理专业本科生自荐信
2013/10/01 职场文书
鲜花方阵解说词
2014/02/13 职场文书
社区党员干部承诺书
2015/05/04 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
保姆聘用合同
2015/09/21 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript