持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情

前言

最近在用vue3开发新的项目，然后在这个过程中遇到了一些问题，记录下这个解决问题的过程，防止过段时间就忘了，算是一个记录。

vue

保存浏览的位置

正常使用vue-router，返回的时候，它是不会保存浏览的位置的。而是回到顶部。

举个例子：

我们在开发列表页，点击其中一个列表进入到详情页，然后返回的时候，应该是要返回刚才浏览列表的位置。而不是回到顶部。

要实现这个功能，vue-router有提供方法，scrollBehavior。

vue-router会记录浏览过的页面的位置也就是下面的savedPosition，当有savedPosition的时候，返回该值即可。页面就会返回该值对应的位置。

没有值的时候就是null，就返回顶部即可。

const router = createRouter({
  scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition)
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
  history: createWebHistory(process.env.BASE_URL),
  routes
})

scrollBehavior方法生效的前提是不要自定义滚动（比如设置某块区域超出滚动），而是使用系统的滚动，不然就无法滚动到savedPosition的位置。

keep-alive不能直接包裹router-view

vue-router从4.0版本开始，keep-alive不能直接包裹router-view，如果这样做，会有个warning.

以前的写法：

  <keep-alive>
    <router-view />
  </keep-alive>

现在的写法：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

要改成包裹动态组件component，然后从router-view插槽取出Component，传入到动态组件中。

动态组件多层嵌套导致keep-alive没有生效

首先我们先在App.vue组件使用keep-alive

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

然后就会匹配到About组件，但是About组件内部又有一个动态组件component

  <div class="about">
    <component :is="componentName" />
  </div>

    const componentName = computed(() => {
      if (route.query.componentName) return route.query.componentName
      return 'HelloWorld'
    })

这个动态组件对应的componentName是个计算属性，如果内部的条件变化，就会导致动态组件重新渲染。

所以就会感觉外层的keep-alive没有生效。

所以这时候可以再用个keep-alive包裹着。这样就算计算属性的内部条件变化，它也会继续缓存下来,不会重新渲染。

  <div class="about">
    <keep-alive>
      <component :is="componentName" />
    </keep-alive>
  </div>