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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
js实现简单计算器
Nov 22 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JS前端加密算法示例
Dec 22 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python configparser模块常用方法解析
2020/05/22 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
python上selenium的弹框操作实现
2020/07/13 Python
python制作微博图片爬取工具
2021/01/16 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
初中政治教学反思
2014/01/17 职场文书
大课间活动制度
2014/01/18 职场文书
文秘个人求职信范文
2014/04/22 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
大学生求职意向书
2015/05/11 职场文书
晚会开场白和结束语
2015/05/29 职场文书
合作协议书格式范本
2016/03/21 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB