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

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

原创最新推荐文章于 2025-03-16 14:21:00 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #缓存 #javascript

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

本着好记性不如烂笔头的原则，本章接着记录一下最近使用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') {//判断是否是需要缓存当前页面将要去的页面
        store.commit('UPDATE_SEARCHPAGE_USE_CACHE', true)
        // store.state.savedPosition = document.body.scrollTop 这里监测页面的的滚动，看实际情况使用，可以使用store存储，也可以直接localstorage
      }
      next()
    })
}

//router index.js 配置页面的meta
{
    path: "/search",
    name: "search",
    component: () =>
      import(
        /* webpackChunkName: "search" */ "../pages/search/index.vue"
      ),
    meta: {
      keepAlive: true //需要缓存的设置为true
    }
  },

//需要记录页面滚动位置的在router里配置这一项
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {        
      return savedPosition    
    } else {      
      if (from.meta.keepAlive) {        
            //这里存储savedPosition
      }        
      return { x: 0, y: to.meta.savedPosition || 0 }    
    }
  }

本文章仅供个人记录，以免遗忘，如果能帮到正在浏览的你，那再好不过了~