vue项目实现列表页-详情页返回不刷新，再点其他菜单项返回刷新的需求

最新推荐文章于 2025-06-07 10:13:50 发布

weixin_30563319

最新推荐文章于 2025-06-07 10:13:50 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/goloving/p/10445624.html

本文探讨了在Vue项目中如何利用keep-alive组件解决列表页和详情页之间的缓存和刷新问题，通过巧妙利用路由元信息、beforeRouteLeave钩子和Vuex状态管理，实现特定页面的缓存与刷新控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　问题背景：有时候一些列表会有一些跳转的需求，比如跳到详情页、或者是其他相关的页面（比如跳到用户列表去查看用户的相关信息）等，此时再返回列表页，列表页会刷新重置。目前需求就是需要改成如下情况：

　　问题1、列表 - 详情页，返回，不刷新重置；

　　问题2、再点其他菜单，再返回，需要刷新重置。

　　解决思路：

　　解决需求自然是想到vue的keep-alive去缓存组件，但是缓存组件有个不好的弊端，就是以后再进入页面也一直保持着上一次浏览的状态，那么如果我们有很多查询条件的情况，或者比如 route/:id 这种动态路由匹配的情况，那么页面就不会重新加载。

　　对于这个需求，组里人员意愿倾向于全部缓存页面，利用 keep-alive 的include、exclude属性去缓存需要缓存的页面；然后对于如果有特殊需要刷新页面的查询参数，比如动态路由的那种情况，就利用watch或activated去解决。个人认为这种解决方案既繁琐，又不易维护。

　　所以一直再想一个通用的方案。我一直的思路就是：

　　1、利用路由的meta信息增加：meta: {keepAlive: true}

　　2、利用路由的beforeRouteLeave，如果跳出去的页面是需要返回不刷新页面的路由（如详情、用户列表），那么就给当前路由meta.keepAlive = true，否则设为false

beforRouteLeave (to, from, next) {
  if (['orderDetaiInfo'].includes(to.name)) {
    from.meta.keepAlive = true
  } else {
    from.meta.keepAlive = false
  }
  next()
}

　　3、然后在app.vue里面去控制

<el-container class="app app_console" v-else-if="$route.fullPath != '/'">
    <WHeader></WHeader>
    <el-container class="forIE">
      <WMenu></WMenu>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
        <router-view v-else :key="activeQuery"></router-view>
      </keep-alive>
      <img class="material" src="./assets/commonImages/pattern.png" height="240">
    </el-container>
  </el-container>

　　当时想的也比较简单，需要缓存的时候就走的keepAlive为true的view，再回来就会缓存不刷新了。当跳至其他菜单后，其keepAlive就置为false了，那么再返回时就走的下面有key值刷新的view了。

　　问题完成一半，测试发现一个问题：

　　上面问题背景的1、2是可以很好的解决了，但是却出现第3个问题：

　　问题3：问题1、2之后再点击详情，再返回，却不是刚刚那个页面，而是之前缓存的页面。

　　原因：问题3的此时，该页面比如order页的meta的keepAlive此时是false的，那我在order当前页面进入的时候去改变为true，依然不会有效果，原因就是我们上面是形成了2个view，我们缓存的是上面那个view，就算改成true了，再返回时也是去的上面那个view，所以是返回之前缓存的页面，很惆怅。

　　解决方案其实也很简单，那么就是想法让从其他菜单，再进入当前order时，让进入的view变成keepAlive的就行了。

　　当时一直没想到一个好的方案，就只想到利用go(0)，让页面重进一次，这样确实解决了问题3，但是体验不好。一度妥协去用watch，但是今天突然想到我可以利用一个blank空的页面去承接一下keepAlive的false的情况，相当于利用blank页面去达到go(0)，让页面重进的目的，但是体验又不会刷新，由于是空页面，所以几乎看不出问题。

　　就写下简单方案：keep-alive，beforeRouteLeave，vuex，blank.vue

　　1、vuex存一个keepAlive控制什么情况进入blank页面

　　什么情况呢？（1）keepAlive为false；（2）需为那些需要缓存的页面，也就是加了meta.keepAlive为true的路由。否则没加的那些路由也都会走进blank页，影响结果。

<el-container class="app app_console" v-else-if="$route.fullPath != '/'">
    <WHeader></WHeader>
    <Blank v-if="!keepAlive && ['orderList'].includes($route.name)"></Blank>
    <el-container v-else class="forIE">
      <WMenu></WMenu>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
        <router-view v-else :key="activeQuery"></router-view>
      </keep-alive>
      <img class="material" src="./assets/commonImages/pattern.png" height="240">
    </el-container>
  </el-container>