vue3浏览器缓存页面，返回到之前的位置

实现方法

• 通过keep-alive缓存组件
• 路由scrollBehavior返回跳转位置

通过keep-live缓存组件

1.vue2下

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

<keep-alive include="index,recruitment" exclude="littleCourseIndex,bigCourseIndex" :max="3">
      <router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2.vue3下

<router-view v-slot="{ Component }">
    <keep-alive
      include="index,recruitment"
      exclude="littleCourseIndex,bigCourseIndex"
    >
      <component :is="Component" />
    </keep-alive>
  </router-view>

3.router.js

const router = createRouter({
  history: createWebHistory(
    import.meta.env.BASE_URL),
  scrollBehavior(to, from, savedPosition) {
    if (to.name == 'index' && from.name && from.name != 'index') {
      if (savedPosition) {
        return savedPosition
      } else {
        return {
          x: 0,
          y: 0
        }
      }
    }

  },
  routes: [{
      path: '/',
      name: 'index',
      meta: {
        keepAlive: true
      },
      component: Index
    },
    {
      path: '/recruitment',
      name: 'recruitment',
      component: Recruitment,
      meta: {
        keepAlive: true
      },
    },
    ]})

router.beforeEach((to, from, next) => {
  let position = window.scrollY || window.pageYOffset //记录离开页面的位置 
  console.log(position, 'position')
  // to.meta.keepAlive = true;
  // next();
  console.log(to, 'to', from, 'from')
  // if (to.name == 'index') {

  // }
  next();

})