解决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功能函数(2009-06-04更新)
Jun 04 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 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
一个好用的分页函数
2006/11/16 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
学习Django知识点分享
2019/09/11 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
语文教育专业推荐信范文
2013/11/25 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
网络技术专业推荐信
2014/02/20 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
入党介绍人意见范文
2015/06/01 职场文书
收入证明申请书
2015/06/12 职场文书
迎新年主持词
2015/07/06 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
中学生运动会广播稿
2015/08/19 职场文书
员工安全责任协议书
2016/03/22 职场文书