关于vue router4.0 的页面缓存keep-alive

最新推荐文章于 2025-03-16 14:21:00 发布

An_cf

最新推荐文章于 2025-03-16 14:21:00 发布

阅读量1.7k

点赞数

文章标签： vue.js 缓存 javascript

本文链接：https://blog.youkuaiyun.com/An_cf/article/details/122431674

版权

本文介绍了在Vue Router 4.0中如何实现页面缓存以保持状态。当从搜索列表页跳转到详情页再返回时，需求是保留之前的搜索状态。作者分享了其查阅官方文档并成功应用的经验，旨在个人记录和帮助遇到同样问题的开发者。

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

本着好记性不如烂笔头的原则，本章接着记录一下最近使用vue的一些干货技巧~

需求背景：搜索列表页跳转到详情页再返回，要记录之前的状态~

因为项目中使用的最新的vue router4.0，所以在搜索无果后自己去官网查看以及尝试，亲测有效~

直接上代码：

//核心代码
//App.js
<router-view v-slot="{ Component }">
      <keep-alive>
        <component v-if="$route.meta.keepAlive" :is="Component" />
      </keep-alive>
    </router-view>
<router-view v-if="!$route.meta.keepAlive"/>


//搜索页
activated () {
    const store = useStore()
    //使用store去存储当前页是否使用缓存的字段searchPageIsUseCache
    if (!store.state.searchPageIsUseCache) {
      this.handleInitData() //没有使用缓存 重新初始化数据
    }else{
      store.commit('UPDATE_SEARCHPAGE_USE_CACHE', false) //将searchPageIsUseCache字段设置为false
    }
},

setup() {
    onBeforeRouteLeave((to, from, next) => {
      // console.log(to,from)
      if (to.name === 'detail&#