vue 返回刷新页面不keepAlive

素颜马尾好姑娘i 2022-03-30 02:44 503阅读 0赞

### 问题： ###

vue项目，从A页面进入B页面，再返回A页面的时候，页面不刷新。

### 举例： ###

从列表页面，选择一条数据点击进去查看详情，这时候页面刷新了，并且执行了 created（）方法和 mounted（）方法，这个时候返回上一页，也就是列表页面，选择另外一条数据点击进来查看详情，页面上保留的还是上一条信息，并且没有执行created（）方法，直接执行了  mounted（）方法。

### 思考： ###

一开始我想到的是，页面添加刷新就行了，把  window.location.reload() ;  添加到  mounted（）方法里面，这时候你猜怎么着，页面开始不停的刷新，所以这条路 就走不通了。

然后我发现，在详情页面上我设置了keepAlive（代码见小图，此小图可放大 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][] ），页面缓存了，所以没刷新，这时候第二条思路出现了，取消 keepAlive 就行了啊，开始搜 ‘vue 返回不keeplive’ ，链接见文末，但是我App.vue 页面上并没有使用 <router-view></router-view> ， 作为萌新，就开始不晓得怎么搞了。

这个时候我发现第三条路，虽然我没使用 <router-view></router-view> 但是却找到了** beforeRouteLeave(to, from, next) \{\}** ， 这个方法是和 methods 同级的（详情见小图，可放大![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]），（  这里简单介绍一下导航守卫 **beforeRouteLeave** 的一些参数 ，**to:router**即将要进入的路由对象，**from:router** 当前导航正要离开的路由 ，**next() **进行管道中的下一个钩子 ，最后要确保调用 **next** 方法，否则钩子不会被 **resolved**，不清楚的可以复制下面代码，查看打印结果），**这个是离开路由前执行的方法，那么我只要在离开这个页面之前，刷新一下页面，就相当于是在下次点击列表之前已经刷新了页面，问题解决！**

beforeRouteLeave(to, from, next) {
        console.log(to);
        console.log(from);
        console.log(next);
        if (to.path === "/job") {
          window.location.reload();
        } else {
        }
        next ();
      }

### 反思： ###

这个属于剑走偏锋了，后期了解了<router-view></router-view> 之后再做改良，

链接地址：[https://blog.csdn.net/leileibrother/article/details/79376502][https_blog.csdn.net_leileibrother_article_details_79376502]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20220330/187d275fc85e47ac961cbf82df5a6918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20220330/c3e880503af54ab0925f49b4806d7201.png
[https_blog.csdn.net_leileibrother_article_details_79376502]: https://blog.csdn.net/leileibrother/article/details/79376502