解决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 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php实现的xml操作类
2016/01/15 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Python 实现一个简单的web服务器
2021/01/03 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
《鞋匠的儿子》教学反思
2014/03/02 职场文书
眼镜促销方案
2014/03/15 职场文书
经营管理策划方案
2014/05/22 职场文书
论文诚信承诺书
2014/05/23 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
食品安全宣传标语
2014/06/07 职场文书
个人党性分析总结
2015/03/05 职场文书
《给予树》教学反思
2016/03/03 职场文书
python OpenCV学习笔记
2021/03/31 Python
基于python实现银行管理系统
2021/04/20 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android