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 相关文章推荐
js正则表达式的使用详解
Jul 09 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
vue设置一开始进入的页面教程
Oct 28 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
jQuery学习笔记之toArray()
2014/06/09 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
Three.js基础部分学习
2017/01/08 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
详解Python中的type和object
2018/08/15 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
环境科学毕业生自荐信
2013/11/21 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
单位授权委托书范本
2014/09/26 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
Nginx缓存设置案例详解
2021/09/15 Servers
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
Java实现注册登录跳转
2022/06/16 Java/Android
React自定义hook的方法
2022/06/25 Javascript