这边是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 前进刷新后退不刷新的更多相关文章

  1. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  2. vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)

      keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...

  3. Vue 页面 前进刷新 后退不刷新(keepAlive)

    前言 遇到这一个个问题  需要是这样的 Vue里面的不刷新问题 页面分为: A 主页  B列表页  C 详情页 A  beforeRouteLeave 时设置 to.meta.keepAlive = ...

  4. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  5. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  6. 玩转vue前进刷新,后退不刷新and按需刷新

    大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...

  7. Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta

    Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...

  8. 单页应用后退不刷新方案(vue & react)

    引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...

  9. 防止刷新/后退引起的重复提交问题的Java Token代码,非Struts

    贴子转自http://hi.baidu.com/bobylou,转之前并没有验证文章里的方法是不是有效,估计原作者把它放到blog之前应该做过测试了吧. Struts本身有一套完善的防止重复提交表单的 ...

随机推荐

  1. 30个类手写Spring核心原理之MVC映射功能(4)

    本文节选自<Spring 5核心原理> 接下来我们来完成MVC模块的功能,应该不需要再做说明.Spring MVC的入口就是从DispatcherServlet开始的,而前面的章节中已完成 ...

  2. 使用Zabbix + Python对Mysql监控

    一.背景介绍 随着公司业务的变迁,公司的开发数据库以mysql为主了.mysql服务器层面的监控,例如CPU.内存.硬盘空间等就用zabbix自带的linux模板即可.数据库层面zabbix也自带了一 ...

  3. IT过来人的10点经验谈

    1 入行要趁早,正常是22岁本科或25岁硕士毕业入行.如果是零基础经培训班加持的,尽量在28岁前入行,30岁以后再想要入行IT的,千万慎重. 2 IT行业确实能挣大钱,而且能为学历一般学校一般家庭背景 ...

  4. Python用xlrd读取Excel数据到list中再用xlwt把数据写入到新的Excel中

    一.先用xlrd读取Excel数据到list列表中(存入列表中的数据如下图所示) import xlrd as xd #导入需要的包 import xlwt data =xd.open_workboo ...

  5. MySQL数据库行转列

    一.数据源如下所示 二.对应SQL语句如下所示 -- 行转列 SELECT t1.`产品名称`, SUM(CASE t1.`日期` WHEN '2019-11-11' THEN t1.`数量` ELS ...

  6. [BUUCTF]PWN——bbys_tu_2016

    bbys_tu_2016 附件 步骤: 例行检查,32位程序,开启了nx保护 本地试运行一下程序,看看大概的情况,测试时候发现输入长度过长程序会崩溃,猜测输入点存在问题 32位ida载入,检索程序里的 ...

  7. 选择…Select…(Power Query 之 M 语言)

    选择行: 筛选Table.SelectRows-文本与数值 筛选Table.SelectRows-日期与时间 保留错误行:= Table.SelectRowsWithErrors( 表, {" ...

  8. 自动化集成:Pipeline流水语法详解

    前言:该系列文章,围绕持续集成:Jenkins+Docker+K8S相关组件,实现自动化管理源码编译.打包.镜像构建.部署等操作:本篇文章主要描述Pipeline流水线用法. 一.Webhook原理 ...

  9. MAVEN基础讲解

    MAVEN解决的问题 1.当我们开始一个工程的时候往往需要几十甚至上百个jar包,如果没有一个管理工具的话,结果就是每个都需要自己手动导入工程目录,并且还有可能发生jar包冲突,版本冲突等问题 2.在 ...

  10. 网络路径排查工具使用/原理浅析(MTR、traceroute、tracepath、windows下besttrace)

    在请求网络资源获取缓慢或者有丢包过程中.经常会使用到网络路径探测工具.linux 下最常用的有mtr.traceroute.tracepath 等. 你是否有一点疑惑,路径探测的原理到底是如何完成的, ...