vue2路由之指定滑动位置scrollBehavior
看源码的时候看到这个属性：
新手自然不知道这个是什么东西了，查了下vue API：
https://router.vuejs.org/en/advanced/scroll-behavior.html
上面这个的意思就是当转到一个新的页面时，定位到最顶端。
Scroll Behavior
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.
Note: this feature only works in HTML5 history mode.
When creating the router instance, you can provide the scrollBehavior function:
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return desired position
}
})The scrollBehavior function receives the to and from route objects. The third argument, savedPosition, is only available if this is a popstate navigation (triggered by the browser's back/forward buttons).
The function can return a scroll position object. The object could be in the form of:
{ x: number, y: number }{ selector: string }
If a falsy value or an empty object is returned, no scrolling will happen.
For example:
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
This will simply make the page scroll to top for all route navigations.
Returning the savedPosition will result in a native-like behavior when navigating with back/forward buttons:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
If you want to simulate the "scroll to anchor" behavior:
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
We can also use route meta fields to implement fine-grained scroll behavior control. Check out a full example here.
最新文章
- 关于ie6/7下的z-index
- 利用IIS管理器模拟CDN
- numpy 总结
- 6.Inout双向端口信号处理方法
- 【Java】Socket+多线程实现控制台聊天室
- (转载)JavaScript中面向对象那点事
- Web 应用配置Log4Net
- 从PRISM开始学WPF（三）Prism-Region-更新至Prism7.1
- 仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]
- linux 最为常用的命令
- nginx请求数据超长的问题解决
- 洛谷.1486.[NOI2004]郁闷的出纳员(Splay)
- Signing Your Applications（Android签名相关）
- Unity EasyTouch官方案例学习
- matplotlib显示中文异常处理
- nginx中location、rewrite用法总结
- POJ 2348 Euclid's Game（博弈）题解
- 配置springMVC
- Axure 蚂蚁设计团队组件库 让交互稿美美"搭"
- [SoapUI] 在Test Step 下加Script Assertion，用 messageExchange 获取当前步骤的response content