vue-router实现用scrollBehavior从详情页返回列表页保存上次加载的数据和自动还原上次的浏览位置

keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素，当组件在keep-alive内被切换时组件的onactivated、ondeactivated这两个生命周期钩子函数会被执行，

被包裹在keep-alive中的组件的状态将会被保留，

例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处。

如果要每次进入组件时页面初始位置都是顶部，可以用路由提供的基础功能scrollBehavior

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