使用keep-alive和路由守卫，实现详情页返回列表页之前位置

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

起因

之前在做一个移动端的项目的时候，遇到从其它页面返回到列表页面的时候，需要返回到之前列表位置的需求。趁着现在有机会，正好总结一下，顺便也分享给有需要的人。

废话少说，直接进入正题。

实现思路很简单，利用keep-alive和路由守卫

keep-alive缓存了数据，路由守卫记录离开列表的位置

Keep-Alive

使用keep-alive，缓存我们需要的组件，也就是列表页，使用include选中目标组件

  <keep-alive include="home">
      <router-view />
  </keep-alive>

t 使用了keep-alive之后，会有两个新的钩子函数，activated() 和 deactivated()，其中activated()我们后面还会用到

export default { 
    activated() { 
        // 在首次挂载、 
        // 以及每次从缓存中被重新插入的时候调用 
     }, 
    deactivated() { 
    // 在从 DOM 上移除、进入缓存 
    // 以及组件卸载时调用 
    } 
}

使用路由守卫beforeRouteLeave()记录离开时的位置

记录位置的话，我们直接获取DOM的scrollTop，并且使用historyTop记录

    beforeRouteLeave(to, from,next){
        this.$data.historyTop = document.documentElement.scrollTop
        next()
  }

使用 activated() 恢复之前位置

保存了位置，我们在返回列表页的时候，直接恢复就可以

    activated() {
        document.documentElement.scrollTop = this.$data.historyTop
    }

意外的知识点

如果你使用的是前进后退的方式的话，在router/index.js中可以使用scrollBehavior(),返回原来的位置，也可以指定返回的位置return {x: ?, y:? }

const router = new VueRouter({
      routes,
      scrollBehavior(to, from, savedPosition) {
        //scrollBehavior方法接收to，form路由对象
        //第三个参数savedPosition当且仅当在浏览器前进后退按钮触发时才可用
        //该方法会返回滚动位置的对象信息，如果返回false，或者是一个空的对象，那么不会发生滚动
        //我们可以在该方法中设置返回值来指定页面的滚动位置，例如：return {x:0, y:0} 回到顶部
        //表示在用户切换路由时让是所有页面都返回到顶部位置
        //如果返回savedPosition,那么在点击后退按钮时就会表现的像原生浏览器一样，返回的页面会滚动过到之前按钮点击跳转的位置，大概写法如下：
        if (savedPosition) {
          return savedPosition
        } 

    }
})

最后

这是比较简单的方法去实现了从详情页返回列表页之前位置

涉及到的知识点：

1. 路由守卫
2. keep-alive及其生命周期

分享一个json数据生成网站：json数据生成