首页切换路由遇到的小Bug

BUG原因：进入首页会发送一些请求，包括下拉刷新出新一页的数据

但是，如果此时切换到收藏页面

然后再回到首页

又重新发送了数据，路由切换会将原来的都删除掉，再回来会重新发送那些网络请求，之前当前页面是3，毕竟保存到state中了，如何保存首页状态呢？

在App.vue中挂在路由的地方代码改成如下

    <router-view v-slot="props">
      <keep-alive include="home">
      // 中间的Component 要大写
        <component :is="props.Component"></component>
      </keep-alive>
    </router-view>

别忘了在首页中添加name属性，要单独创建一个script标签，不能放setup中

<script>
export default {
  name:'home'
}
</script>

还有个问题，切换到收藏页会自动发送一个请求下一页数据的请求

原因出自于这里，因为监听的是window窗口，所以切换到其它加载到底部的页面，也会触发请求，如果在别的页面到底部了，切换到首页也会发送，如下图所示

解决办法：改为监听为元素，这样互相都不影响，而window是全局影响 先设置高度，然后注意加上box-sizing: border-box; 防止padding撑开

.home {
  padding-bottom: 60px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

之后：

<div class="home" ref="homeRef">

//
const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeStore.fetchHouselistData().then(() => {
      isReachBottom.value = false
    })
  }
})

这样就OK 然后还有一个优化点，就是保存首页当前位置，切换到其他页面后回到首页依然在那个位置 在home.vue中添加如下代码，将之前记录的高度赋给top //- onActivated(): 被包含在<keep-alive>中的组件， // 会多出两个生命周期钩子函数。被激活时执行。

onActivated(() => {
  homeRef,value?.scrollTo({
    top:scrollTop.value
  })
})