Vue快速实现列表记忆功能

 

​技术点

 

1. 为需要开启列表记忆的路由开启keep-alive

2. vue-router的初始化中新增一个配置，scrollBehavior [1]

缺点：

仅在PC上使用较多，因为只有当页面滚动时才有效，如果在页面内某个元素滚动则无法监听到滚动的距离；

比如移动端常用的布局就无法监听（列表头+列表滚动）

// 1. 为需要开启列表记忆的路由开启keep-alive
// 常用操作就是在路由表的配置一个参数keepAlive
// 然后，在根页面App.vue里根据这个参数判断是否被keep-alive包裹

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

// 2.vue-router的初始化中新增一个配置，scrollBehavior
​
const router = new VueRouter({
  routes: [...],
  // savedPosition 当浏览器前进和后退时会记录页面X轴和Y轴滚动的距离
  scrollBehavior (to, from, savedPosition) {
    // 当这个值存在时，触发记忆（距离回滚）
    if(savedPosition) {
      return savedPosition
    }
    return { x:0, y:0 }
  }
})

 

通过上面这两步设置，可以解决大多数的场景。

如果有遇到复杂些的场景，也可以参考官方仓库中issue里给出的答案

https://github.com/vuejs/vue-router/issues/1459

https://github.com/vuejs/vue-router/issues/1187

[1] https://router.vuejs.org/zh/api/#scrollbehavior

 

 

同步微信公众号 [时不荒]