vue 前进刷新后退不刷新
这边是router-view部门的写法:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
下面是router中的写法,想法是匹配name末尾是指定字符的页面(再次以结尾为Add的页面为例),最初的写法是这样的:
const KEEPALIVE_NAME = 'Add'
if (to.name.indexOf(KEEPALIVE_NAME) !== -1) {
// console.log('前进。。。')
from.meta.keepAlive = true
to.meta.keepAlive = false
}
if (from.name && from.name.indexOf(KEEPALIVE_NAME) !== -1) {
// console.log('后退。。。')
from.meta.keepAlive = false
to.meta.keepAlive = true
}
后面想了下这样的写法不够严谨,于是修改为用正则匹配的方式:
const VERIFY_NAME = /^\b\S*?Add\b$/
if (VERIFY_NAME.test(to.name)) {
console.log('前进。。。')
from.meta.keepAlive = true
to.meta.keepAlive = false
}
if (VERIFY_NAME.test(from.name)) {
console.log('后退。。。')
from.meta.keepAlive = false
to.meta.keepAlive = true
}
下面是效果图:


vue 前进刷新后退不刷新的更多相关文章
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)
keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...
- Vue 页面 前进刷新 后退不刷新(keepAlive)
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题 页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = ...
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 玩转vue前进刷新,后退不刷新and按需刷新
大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...
- Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta
Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
- 单页应用后退不刷新方案(vue & react)
引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...
- 防止刷新/后退引起的重复提交问题的Java Token代码,非Struts
贴子转自http://hi.baidu.com/bobylou,转之前并没有验证文章里的方法是不是有效,估计原作者把它放到blog之前应该做过测试了吧. Struts本身有一套完善的防止重复提交表单的 ...
随机推荐
- 编译工具grdle部署
目录 一.简介 二.部署 三.测试 一.简介 Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具.在github上,gradle项目很多 ...
- 罗德与施瓦茨公司和TSN Systems公司为车载以太网提供纳秒级精度延时测量
前言 随着毫米波雷达.激光雷达和摄像头等传感器的大量出现,并要求海量的传感器数据在几毫秒内传输完成并处理,使得网络延迟问题变得越发重要.测试和测量的专家Rohde&Schwarz(以下简称R& ...
- DIgSILENT PowerFactory 15.1.7 破解过程
将dll文件复制到安装路径下:
- &pwn1_sctf_2016 &ciscn_2019_n_1 &ciscn_2019_c_1 &ciscn_2019_en_2&
在做buu题目的时候,发现在最上面有几道被各位师傅打到1分的题,强迫症逼迫我去做那几道题. 这里来试着去解决这些题...讲真的,我感觉自己刷题真的少,即使是很简单的栈题目,我还是能学习到新的东西.这里 ...
- 如何完成符合ISO 26262要求的基于模型设计(MBD)的测试
背景介绍 随着汽车行业的迅速发展,汽车的复杂程度不断增加,越来越多的汽车电子控制系统具有与安全相关的功能,因此对ECU的安全要求也越来越高.复杂的软件功能,将会带来大量的软件风险问题,如何保证软件的安 ...
- Tornadofx学习笔记(4)——IconTextFx开源库,整合5000+个字体图标
JavaFx中其实也可以直接使用字体图标iconfont的,只需要加载ttf字体文件,之后设置unicode即可,具体可以看我给出的代码 既然JavaFx可以,那么以JavaFx为基础的Tornado ...
- CF1145F Neat Words 题解
Content 本题为 CF 愚人节比赛题目. 给定一个长度为 \(n\) 的,仅包含大写字母的字符串,问这个字符串里面的字母是否全部都是由仅有直线的字母组成,或者全部都是由有曲线的字母构成. 数据范 ...
- CF831B Keyboard Layouts 题解
Content 给你 \(26\) 个字母的映射(都是小写,大写的映射方式相同),再给你一个字符串 \(s\),求它的映射结果(如果有非字母的字符保持不变). 数据范围:\(1\leqslant |s ...
- .NET 6 优先队列 PriorityQueue 实现分析
在最近发布的 .NET 6 中,包含了一个新的数据结构,优先队列 PriorityQueue, 实际上这个数据结构在隔壁 Java中已经存在了很多年了, 那优先队列是怎么实现的呢? 让我们来一探究竟吧 ...
- java 常用类库:Math:常用min、max;floor;ceil;random;
Math //7.取整数小于目标的最大整数(Math.floor(1.2));//8.取整数.获取大于目标的最大整数System.out.println(Math.ceil(1.2)); //18.获 ...