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. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
随机推荐
- WEB技术路线图
- nginx关闭目录浏览功能
nginx图片服务器,因为图片的敏感度,不允许直接访问图片的目录: 需要修改配置文件,去掉 autoindex on; 重启nginx即可 location /soft { #autoindex on ...
- url自动补全index.php
location / { index index.html index.htm index.php l.php; autoindex on; if (!-e $request_filename) { ...
- Linux搭建Socks5代理服务器
下面笔者将用SS5在亚马逊云服务器上的Linux搭建一台Socks5 Proxy Server,具体过程如下: 1.首先,编译安装SS5需要先安装一些依赖组件 yum -y install gcc g ...
- juqery 判断所有input 不能为空 判断只能为数字 判断身份证号:18位和15位 判断是否银行卡号
//jq 判断某字符串是否含有特殊符号 function CheckNum() { //定义数组保存特殊字符 var AllNumIsSame = new Array("’", & ...
- myspl数据库基础
mysql数据库sql 语句大全收录---sql语句不区分大小写 启动/停止 net start mysql net stop mysql 用户登录 mysql -uroot -p ...
- .NET Core开发日志——RequestDelegate
本文主要是对.NET Core开发日志--Middleware的补遗,但是会从看起来平平无奇的RequestDelegate开始叙述,所以以其作为标题,也是合情合理. RequestDelegate是 ...
- [No0000178]改善C#程序的建议1:非用ICloneable不可的理由
好吧,我承认,这是一个反标题,实际的情况是:我找不到一个非用ICloneable不可的理由.事实上,接口ICloneable还会带来误解,因为它只有一个Clone方法. 我们都知道,对象的拷贝分为:浅 ...
- JS弹出对话框的三种方式
JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...