Vue 实现前进刷新，后退缓存处理，保留上次浏览位置

发表时间： | 阅读次数:

有这样一个需求。从A页面访问B页面，B页面需要刷新加载，从B页面返回A页面，A页面缓存处理。你会怎么处理？
场景：列表页访问详情页面后，从详情页面返回列表页面时，列表页面滚动到上次浏览的位置。方便用户继续浏览。

需求分析

1.如果想要A页面停留在上次浏览的位置，必须记录离开A页面前的浏览位置。
2.如何区分是否缓存处理？
3.A页面如何滚动到上次浏览的位置？

如何Coding？

  • 如何记录离开A页面前的浏览位置？
    我们可以利用Vue Router 来处理, Vue Router中提供了一个名为beforeRouteLeave方法，可以处理离开页面前的一些操作。
    我们可以在A页面中加入这样的一个方法，来记录当前的页面浏览位置。并保存到meta中。

    1
    2
    3
    4
    5
    6
    // A页面
    beforeRouteLeave (to, from, next) {
    	let position = document.documentElement.scrollTop || document.body.scrollTop
    	from.meta.savedPosition = position
    	next()
    }

  • 如何区分是否缓存处理？
    我们依旧可以利用 Vue 的 keep-alive 组件 和 Vue 的 Router 共同处理，在根组件（以App.vue为例）中，加入下面代码。

1
2
3
4
5
6
7
8
9
10
// 在Vue router中标记是否需要缓存处理
{
  name: 'A',
  path: '/a',
  component: () => import('@/pages/A'),
  meta: {
    keepAlive: true
    // keepAlive为 true表示缓存处理
  }
},
1
2
3
4
5
6
<!-- App.vue -->
<!-- 如果路由里面的meta存在keepAlive，就缓存处理 -->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
  • 如何加载到上次浏览位置？
    我们可以利用Vue Router中提供的一个名为scrollBehavior的方法。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        if (to.meta.savedPosition) {
        	// 如果meta信息中存在savedPosition，页面就滚动到上次浏览的位置（savedPosition）
          return { x: 0, y: to.meta.savedPosition}
        }
        return { x: 0, y: 0 }
      }
    }