华山资源网

解决vue单页使用keep-alive页面返回不刷新的问题
网络编程 2024/11/15 佚名
3 1

使用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页面返回不刷新的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com