关于vue-router切换滚动条自动置顶的一点记录

    现在在写一个单页面的项目，但是遇到了一个问题，就是每次切换回主页滚动条自动置顶，

由于是首页->详情页，这样的页面切换方式，每次切换回来就自动置顶带来的体验非常不好，需要解决这个问题

    查了一些资料，有vue-router官方自己的滚动方法，还有一个就是keep-alive缓存。

    首先是官方的方法，

     scrollBehavior (to, from, savedPosition) {

// return 期望滚动到哪个的位置

}

    然后是keep-alive，它可以将切换过的页面缓存起来，需要设置路由元信息 meta:{ keepAlive : true }

    

      < keep-alive >

     < router-view v-if= " $route . meta . keepAlive " > router-view >

keep-alive >

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

    这里就可以把切换之前的首页缓存起来，如果滚动条是在body上那么这样就可以生效了，但是我的滚动条是在子元素上面的

    ，所以没有效果照样到顶，因为body的scrollTop从始至终都是0。

    那就要单独设置这个元素的scrollTop的值了，首先要获取到这个元素给他设置一个ref吧

     ref="testScroll"

     由于路由切换是使用router.push来进行切换的，将它放在一个方法里，然后每次点击跳转的时候，获取当前元素的scrollTop值，并且把它赋给一个值 isScrollTop,这个值储存在路由元信息中。

要在导航守卫中做一个判断，就是判断切换是上级往下级方向切换时，将isScrollTop的值归0

      

    routeChange(){

this.$route.meta i.sScroll = this. $refs. testScroll. scrollTop

this. $router. push({ name: xxx})

  }

   当切换回来的时候使用watch监听$route ，应该有更好的方法使用vuex也可以，使用官方方法配合锚点也可以

   

watch:{

$route( to, from){

if( to. name == ' index '){

this. $refs. ctscroll. scrollTop = this.$route.meta. isScrollTop

}

}

},