vue 页面切换滚动+锚点

情况一：

导航栏 有导航 跳到某个页面的某个位置

方法一：

通过refs定位 修改 document.documentElement.scrollTop和document.body.scrollTop的值

var download = this.$refs["download"]
var total = download.offsetTop
document.documentElement.scrollTop=total
document.body.scrollTop=total

　　

方法二进阶：

在router.js 文件里

let router = new Router({
router,
scrollBehavior(to,from,savedPosition){
    if(to.query.anchor){//路由跳转要传需要定的锚点的id 例如；this.$router.push("index?anchor=download")
        return {
            selector:"#"+to.query.anchor
        }
    }
}
})

这样就不用每个有锚点的页面都需要写上面的方法一代码。

但是这个有个下面这个问题：

当页面已经跳转过锚点，将页面滚动到导航栏再次点击锚点导航，页面不会自动滚动到锚点的地方。因为不会触发路由。

现在的解决办法就是：

就是添加点击事件的判断，如果路由已经是含有要跳转的锚点 ，就执行方法一的，如果没有，就路由跳转。

click(){
  if(this.$router.query.anchor=="download"){
   方法一      
}  else{
  this.$router.push('index?anchor=download')
}
}

 

但是这个有个下面这个问题：

页面跳转到相应锚点，点击返回按钮，返回到上一个页面，页面会现在之前点击进入的地方然后闪一下到顶端。

之前有试过以下代码没有效果

let router = new Router({
router,
scrollBehavior(to,from,savedPosition){
    return {
            x:0,y:0
        }
}
})

 

然后用这个方法解决了：

在router.js

router.beforeEach((to,from,next)=>{
    document.documentElement.scrollTop=0
    document.body.scrollTop=0
    next()
})