关于vue的scrollBehavior

咱们在实际开发中会遇到一个问题：
我们在一个很长的列表页往下拉，然后点击列表中的某一个数据进入到详情页查看。此时我们决定返回列表也继续查看列表。
很多情况下，由于列表页的组件已经被销毁，所以我们返回到列表页后页面会置顶，不得不又重新下拉查看列表，这样就做了很多没有必要的操作，也是不符合用户的预期。

用户希望当我查看玩详情页以后返回，返回列表页的位置是刚刚浏览的位置

这种情况有什么好的解决办法呢？
这里带来了3种解决方案：

1.使用 缓存，即不销毁列表页

APP.js中

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

router.js中

 routes: [
    {
      path: '/',
      name: 'List',
      //component: List
      component: () => import('./views/index/list.vue'),
      meta: {
        keepAlive: true // 需要缓存
      }
    },
    {
      path: '/content/:contentId',
      name: 'content',
      component: () => import('./views/index/content.vue'),
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
]

详情页面不需要缓存，列表页面需要缓存

2.使用路由守卫

原理就是在beforRouterLeave的路由钩子记录当前页面滚动位置

//在页面离开时记录滚动位置,这里的this.scrollTop可以保存在vuex的state或者浏览器本地
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },

//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

这里的this.scrollTop可以保存在vuex的state或者浏览器本地

3.使用vue-router方法scrollBehavior（推荐）

router.js中

  //滚动行为
  scrollBehavior(to, from, savedPosition) {
    // to：即将进入的路由对象
    // from：当前导航正要离开的路由对象
    // savedPosition：上次记录的滚动位置
    // 默认行为，如果有记录的滚动位置，则恢复到该位置
    if (savedPosition) {
      return savedPosition;
    }
    // 没有记录的滚动位置，则滚动到页面顶部
    return { top: 0 };
  },

该方案直接在路由进行处理，兼容每个页面并且页面加载完后并也不会产生1px的滚动位置。

本文转自 https://www.jianshu.com/p/a0a71d14fc53 ，如有侵权，请联系删除。