vue3实现路由数据和页面位置缓存

• 为路由定义scrollTop meta元信息来记住每个路由的位置

 {
     path: '/home',
     name: 'home',
     meta: { title: '首页', scrollTop: 0 },
     component: () => import('@/views/home.vue'),
 },

• 配置路由守卫，在每个路由前将当前页面滚动距离赋值给他们的scrollTop

 router.beforeEach((to, from) => {
   to.meta.scrollTop = document.documentElement.scrollTop;
 });

• 通过scrollBehavior在每次进入路由后将scrollTop元信息赋值给当前页面的document.documentElement.scrollTop

  scrollBehavior(to, from, savedPosition) {
     return { top: from.meta.scrollTop, left: 0 };
   },

• 注意：

  • 当页面数据是从后端请求的时候，需要通过keepAlive缓存当前页面数据，否则页面没有数据则不能滚动。

  • 目前该方法只能缓存一级路由的位置。