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本身有一套完善的防止重复提交表单的 ...
随机推荐
- 材料资源和成本资源(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 第二种资源就是[材料资源]啦~ 拿到资源第一件事就是输入基本信息,这个,不复读了,复读得我自己都嫌烦.好吧,还得说明一下, ...
- 项目的基本概念(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 我一看到这个标题就头疼,好吧,又是概念,好在我不要参加相关的考试,否则文字连同标点符号都得背%¥#%#~ 张同学说,项目& ...
- 丈量你的代码,从cloc开始
如果我想统计我当前的项目有多少代码量?行数最高的代码文件有哪些?并且排除某些目录,怎么统计?要统计出注释多少行,和代码多少行?使用cloc就行. cloc是一款使用Perl语言开发的开源代码统计工具, ...
- Linux 三剑客之sed
目录 Linux 三剑客之sed 命令补充: sort命令 uniq命令 cut命令 tr命令 wc命令 三剑客 - sed 编辑模式: 定位分类: 实例如下: d模式--删除模式 p模式--打印 a ...
- 选课系统V1.0
tree . . ├── bin │ ├── __init__.py │ └── start.py #启动文件 ├── conf │ ├── __init__.py │ └── set ...
- 账号不允许远程访问服务器上的mysql数据库的解决办法host is not allowed to connect to this mysql
改表法.可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 "use ...
- MindSpore联邦学习框架解决行业级难题
内容来源:华为开发者大会2021 HMS Core 6 AI技术论坛,主题演讲<MindSpore联邦学习框架解决隐私合规下的数据孤岛问题>. 演讲嘉宾:华为MindSpore联邦学习工程 ...
- 【LeetCode】61. Rotate List 解题报告(Python)
[LeetCode]61. Rotate List 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fux ...
- 从源码看全局异常处理器@ExceptionHandler&@ExceptionHandler的生效原理
1.开头在前 日常开发中,几乎我们的项目都会用到异常处理器,我们通常会定制属于自己的异常处理器,来处理项目中大大小小.各种各样的异常.配置异常处理器目前最常用的方式应该是使用@ControllerAd ...
- 高效位运算 __builtin_系列函数
•int __builtin_ffs (unsigned int x) 返回x的最后一位1的是从后向前第几位,比如7368(1110011001000)返回4. •int __builtin_clz ...