vue实现前进刷新后退不刷新效果
最近在用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实现前进刷新后退不刷新效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 使用logon trigger完成动态的session跟踪(r4笔记第29天)
- struts2关于action拦截器使用方法 现记录如下
- Struts2【入门】
- 通过ORA错误反思sql语句规范(r4笔记第41天)
- 算法01 七大排序之:冒泡排序和快速排序
- 自下向上的编写容易阅读的代码(上)
- Hibernate【inverse和cascade属性】知识要点
- 算法02 七大排序之:直接选择排序和堆排序
- Hibernate【映射】续篇
- Java基础-11总结Eclipse使用,API,Object类
- Hibernate【映射】知识要点
- 算法03 七大排序之:直接插入排序和希尔排序
- Hibernate入门这一篇就够了
- 算法04 七大排序之:归并排序
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法