vue 后退不刷新页面
使用 this.$router.push({path: '/aichat'})路由跳转方式跳转页面
要实现 home => chat chat页面刷新;
chat => report,
report => chat chat 页面不刷新
即从report 返回到 chat chat页面不刷新 保留原来的记录
使用 vue.js 提供的动态组件 keep -alive 实现
在App.vue中
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
在路由 index.js中加 标识 表示此页面需要缓存:meta: { keepAlive: true }
{ path:'/aichat/:id',name:'aichat', component: resolve => require(['../components/zixun/aichat'], resolve), meta:{keepAlive: true} },
chat页面
注意:因为这里是路由跳转到这个chat页面,所以这么处理
script里:
//生命周期最早
beforeRouteEnter(to, from, next) {
//判断是从哪个路由过来的 从下面这两个页面进来,就为false即刷新页面,其他页面就为true,不刷新页面
if(from.name ==='zxhome' || from.name === 'home'){
to.meta.keepAlive = false;
}else{
to.meta.keepAlive = true;
}
next();
},
生命周期 activated只有加了keep-alive 并且后退的时候触发
每次将question数据保存到store仓库,在后退的时候重新刷新当前的数据,否则每次页面保存的都是首次数据
activated(){
this.question = this.$store.state.question
},
在report页面
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 A 缓存,即不刷新
next();
},
vue 后退不刷新页面的更多相关文章
- vue中如何刷新页面
vue中刷新页面的方法 1. 不能使用 this.$router.go(0) 或者 window.reload() 不起作用还特别恶心 这个才是有效果的刷新页面,只要照图敲,就能有效果 我们在 app ...
- vue打包后刷新页面报错:Unexpected token <
前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...
- vue 后退不刷新,前进刷新 keep-alive
最近在开发中遇到了这样的一个问题: A.B.C三个页面,有如下这样的场景: (1)从页面A离开进入B或C的时候,缓存A页面的数据,并且返回到A后,能保持A页面的跳转前职位 (2)离开B进入C的时候,缓 ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- Vue 页面 前进刷新 后退不刷新(keepAlive)
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题 页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = ...
- 玩转vue前进刷新,后退不刷新and按需刷新
大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta
Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
随机推荐
- 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解
原文:Chalarangelo 译文:IT168 https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with ...
- C#设计模式--状态模式
设计模式: 状态模式(State Pattern) 简单介绍: 在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式. 在状态模式中,我们创建表示 ...
- jenkins之 pipeline 小尝试
最近,一个小需求,动态建立slave节点来执行自动化用例,原有jenkins 老方式不满足需求,就用到jenkins2的pipeline来实现,但在实现过程中,2个小坑记录下 1.jenkins不能读 ...
- Windows环境下安装Linux
怎样实现在现有的Windows系统上安装Linux,实现双系统启动
- PostgreSQL+PostGIS安装以及使用
安装,参照: https://www.cnblogs.com/ytwy/p/6817179.html 创建企业级地理文件数据库时报错," You must copy the lates ...
- [Day1]常用Dos命令,Java相关描述及基础
1.常用的DOS命令 (1)返回上一级目录:cd.. (2)返回盘符根目录:cd\ (3)切换当前盘符: 盘符: (4)进入文件夹: cd 文件路径 (5)展示当前目录下的所有内容:D ...
- Scaleform 4.3 (1)
//可变参数传输 GFxValue args[3], result; args[0].SetNumber(i); args[1].SetString("test"); args[2 ...
- 转:ActiveMQ的作用总结(应用场景及优势)
原文地址: ActiveMQ的作用总结(应用场景及优势) 业务场景说明: 消息队列在大型电子商务类网站,如京东.淘宝.去哪儿等网站有着深入的应用, 队列的主要作用是消除高并发访问高峰,加快网站的响应速 ...
- Python3+Selenium环境配置
一.所需工具 1.Python3.6安装包 2.Selenium安装包(selenium-server-standalone-3.8),如果是Python3的话可以不用下载selenium压缩包,Py ...
- 《Mysql ALTER基本操作》
一:ALTER 添加单列 - 语法 - ALTER TABLE 表名 ADD 列名 定义类型 [FIRST(列将加入最上方) | AFTER 字段名(列加入某某字段之后) ] - 示例 `user` ...