解决vue单页使用keep-alive页面返回不刷新的问题


Posted in Javascript onMarch 13, 2018

使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得。

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方

<router-view></router-view>

把这段代码改成如下:

<keep-alive> 
<router-view v-if="$route.meta.keepAlive"></router-view> 
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

我们能看到这段代码做的逻辑判断,当路由的meta属性的keepAlive属性值为true时页面的状态保存,其他情况下不保存状态。

然后就是给我们路由设置keepAlive属性值,比如我是给主页(列表页)的路由设置了keepAlive属性为true。

{ 
name: 'index', 
path: '/index', 
title: '主页', 
component(resolve) { 
require(['views/index.vue'], resolve) 
}, 
meta: { 
pageTitle: '主页', 
keepAlive: true 
} 
}

这样设置了之后,主页的状态就会保存,返回键返回到主页时页面不会刷新请求数据了。

但是有问题啊!!!从主页跳到任何页面,再返回主页都不会刷新页面!这并不是我想要的,我只要从详情页返回列表页时不刷新页面,其他情况下是需要刷新的,那么我就需要定制化处理了。大致思路就是从主页跳转到其他页面时把主页的keepAlive值设置为false,从详情页返回主页时把主页的keepAlive值设置为true就好了,代码如下:

主页跳转到其他页面时把主页的keepAlive值设置为false

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 //修改列表页的meta值,false时再次进入页面会重新请求数据。
 beforeRouteLeave(to, from, next) {
 from.meta.keepAlive = false;
 next();
 }
};

从详情页返回主页时把主页的keepAlive值设置为true(要做个判断,判断是不是返回到主页的)

export default {
 data() {
 return {
 };
 },
 mounted() {
 },
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 if (to.path == "/index") {
 to.meta.keepAlive = true;
 } else {
 to.meta.keepAlive = false;
 }
 next();
 }
};

这里使用了beforeRouterLeave(to,from,next){},它是methods平级的,具体使用方法可以查阅一下。

注意问题:

beforeRouterLeave必须写在有配置路由的页面上才有效的,最开始我想写在App.vue页面上,发现根本就不执行的!

以上这篇解决vue单页使用keep-alive页面返回不刷新的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 #Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 #Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 #Javascript
解决vue多个路由共用一个页面的问题
Mar 12 #Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
webpack打包js的方法
Mar 12 #Javascript
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
js表格分页实现代码
2009/09/18 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python使用turtle绘制分形树
2018/06/22 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Flask之请求钩子的实现
2018/12/23 Python
Python3实现定时任务的四种方式
2019/06/03 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
文明市民先进事迹
2014/05/15 职场文书
青年文明号口号
2014/06/17 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
演讲稿开场白台词
2014/08/25 职场文书
小学班级特色活动方案
2014/08/31 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python