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

本着好记性不如烂笔头的原则，本章接着记录一下最近使用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&#