-
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} //跳转到锚点
}
}
})
