网站建设推进会,免费的网站程序,标准页面布局,企业做网站服务费使用前端路由#xff0c;当切换到新路由时#xff0c;想要页面滚到顶部#xff0c;或者是保持原先的滚动位置#xff0c;就像重新加载页面那样。 vue-router 能做到#xff0c;而且更好#xff0c;它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在 HTML5 h…使用前端路由当切换到新路由时想要页面滚到顶部或者是保持原先的滚动位置就像重新加载页面那样。 vue-router 能做到而且更好它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在 HTML5 history 模式下可用。
当创建一个 Router 实例你可以提供一个 scrollBehavior 方法
const router new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置}
})scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
这个方法返回滚动位置的对象信息长这样
{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0 支持)
如果返回一个 falsy (译者注falsy 不是 false参考这里)的值或者是一个空对象那么不会发生滚动。
举例
scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 }
}对于所有路由导航简单地让页面滚动到顶部。
返回 savedPosition在按下 后退/前进 按钮时就会像浏览器的原生表现那样
scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}
}如果你要模拟『滚动到锚点』的行为
scrollBehavior (to, from, savedPosition) {if (to.hash) {return {selector: to.hash}}
}我们还可以利用路由元信息更细颗粒度地控制滚动。查看完整例子
const scrollBehavior (to, from, savedPosition) {if (savedPosition) {// savedPosition is only available for popstate navigations.return savedPosition} else {const position {}// new navigation.// scroll to anchor by returning the selectorif (to.hash) {position.selector to.hash}// 如果meta中有scrollTopif (to.matched.some(m m.meta.scrollToTop)) {// cords will be used if no selector is provided,// or if the selector didnt match any element.position.x 0position.y 0}// if the returned position is falsy or an empty object,// will retain current scroll position.return position}
}与keepAlive结合如果keepAlive的话保存停留的位置
scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {if (from.meta.keepAlive) {from.meta.savedPosition document.body.scrollTop;}return { x: 0, y: to.meta.savedPosition ||0}}
}在文档页面(http://localhost:8080/document)拉动滚动条然后刷新浏览器会发现滚动条依然在原来的位置这是浏览器的默认行为会记录浏览器滚动条默认位置。
但是点击浏览器“前进/后退”按钮会发现当初那个页面的滚动条从0开始了没有记录上一次滚动条的位置。现在要求点击浏览器“前进/后退”按钮页面滚动条要记录上一次的位置这时需要设置它的的滚动行为。
这时候需要在路由配置中设置 scrollBehavior(to,from,savePosition)函数函数有三个参数。scrollBehavior() 函数在点击浏览器的“前进/后退”或者切换导航的时候触发。
scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”或者切换导航的时候触发。console.log(to) // to要进入的目标路由对象到哪里去console.log(from) // from离开的路由对象哪里来console.log(savePosition) // savePosition会记录滚动条的坐标点击前进/后退的时候记录值{x:?,y:?}}let router new VueRouter({mode:history,//默认是hash模式linkActiveClass:menvscode-active,scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”或者切换导航的时候触发。console.log(to) // to要进入的目标路由对象到哪里去console.log(from) // from离开的路由对象哪里来console.log(savePosition) // savePosition会记录滚动条的坐标点击前进/后退的时候记录值{x:?,y:?}if(savePosition) {return savePosition;}else{return {x:0,y:0}}},routes:[{path:/,name:index,component:Home,},{path:/home,name:Home,//name代表当前的路由component:Home,alias:/index //当访问/index的时候就能匹配到当前的路由了。},{path:/document,name:Document,components:{ // 多个视图的时候默认渲染default的视图。default:Document,slider:Slider,home:Home}}]
})
export default router我们还可以设hash来控制滚动行为定位到某一位置
if(to.hash){ //先判断目标路由有没有hash值return {selector:to.hash}
}App.vue在路径后面添加 hash 值。
templatediv idappdiv classnav-boxul classf-cblirouter-link to/ exact tagdiv eventmouseoverhome/router-link/lilirouter-link :to{path:/document#abc} eventmouseoverdocument/router-link/lirouter-link to/about tagli eventmouseoveri/ispanabout/span/router-link/ul/divdiv classcontent f-cbrouter-view nameslider/router-view !-- 命名视图 --router-view classcenter/router-view/div/div
/template
/components/Document.vue
templatediv我是文档p idabc定位到这个元素/p/div
/templaterouter/index.js
let router new VueRouter({mode:history,//默认是hash模式linkActiveClass:menvscode-active,scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”或者切换导航的时候触发。console.log(to) // to要进入的目标路由对象到哪里去console.log(from) // from离开的路由对象哪里来console.log(savePosition) // savePosition会记录滚动条的坐标点击前进/后退的时候记录值{x:?,y:?}/*if(savePosition) {return savePosition;}else{return {x:0,y:0}}*/if(to.hash){ //先判断目标路由有没有hash值return {selector:to.hash}}},routes:[]
})
export default router
