Vue 刷新问题解决

最新推荐文章于 2024-04-19 11:32:22 发布

weixin_47127217

最新推荐文章于 2024-04-19 11:32:22 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47127217/article/details/121300749

版权

2 篇文章 0 订阅

订阅专栏

关前提醒：本人小白一枚，很多地方不懂，也可能很多地方说的不到位或者说错了请各位大佬多多理解，也望各位大佬不吝赐教！

在使用vue进行商品收藏的时候点击方法跳转过去发现数据不会被重新调用(之前网页已经加载过一次了)

调用方法如下：

        created() {
            alert('created');
            this.getUserId();
            this.getData();
        }

使用了keep-live

    <keep-alive>
      <router-view/>
    </keep-alive>

我就怀疑是不是他缓存了页面的数据啊，而且地址栏未发生变化，貌似created也只是在页面初次进入或刷新的时候有一个加载。

我就先将keep-live改为路径发生变化的时候加载

    <keep-alive>
      <router-view :key="$route.fullPath"/>
    </keep-alive>

<router-view :key="$route.fullPath"/>：当地址发生改变(包括参数改变)则重新渲染页面(例如动态路由参数的变化)

然后匹配keep-live的一个钩子函数

        activated(){
            alert('activated')
            this.getUserId();
            this.getData();
        }

activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

发现加上keep-live和activated能大概解决数据方法的问题

每次进入页面的时候也会调用activated();

附上当时看的二个网页

关注