vue滚动行为

• scrollBehavior(只在支持history.pushState的浏览器可用)

使用场景：点击浏览器自带的前进或后退键，想让页面滚到顶部，或者是保持原来的滚动位置，vue-router可以做的更好

1.返回上一路由原滚动条位置

例：

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Rotuer({
    mode:"history",
    scrollBehavior(to,from,savePosition){
      //saveposition:记录滚动条的坐标，点击前进后退时记录值{x：？,y:?}
        if(saveposition){
            return saveposition;
        }else{
            return {x:0,y:0}
        }
    }
    routes:[
        {
        
         }
    ]
})

2.返回上一路由设置的hash位置

页面上：

<template>
    <div>
          <p @click="goNext()">滚动条返回当前位置</p>
    </div>
</template>
export defauit{
  data(){
      return{
      }
  },
  methods:{
      goNext(){
          let _this=this;
          _this.$router.push("/home#id")
      }
  }
}

路由中：

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
    mode:"histtory",
    scrollBehavior(to,from,savePosition){
        if(to.hash){    //判断是否含有hash
          return {selector:to.hash}  //跳转到锚点
        }
    }
})