Vue路由scrollBehavior滚动行为控制锚点
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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: , y: }
}
对于所有路由导航,简单地让页面滚动到顶部。
返回 savedPosition
,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: , y: }
}
}
如果你要模拟『滚动到锚点』的行为:
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 selector
if (to.hash) {
position.selector = to.hash
}
// 如果meta中有scrollTop
if (to.matched.some(m => m.meta.scrollToTop)) {
// cords will be used if no selector is provided,
// or if the selector didn't match any element.
position.x =
position.y =
}
// 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: , y: to.meta.savedPosition ||}
}
}
在无法使用history模式的情况下,使用另外一种方式:
const Foo = {
template: `
<div>
<div><a href="javascript:void(0)" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {{index}} </a></div>
<div :id="'anchor-'+index" class="item" v-for="index in 20">{{index}}</div>
</div>
`,
methods: {
goAnchor(selector) {
var anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop
}
}
}
const Bar = {
template: '<div>bar</div>'
} const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
] const router = new VueRouter({
routes,
}) const app = new Vue({
router
}).$mount('#app')
Vue路由scrollBehavior滚动行为控制锚点的更多相关文章
- 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)
超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...
- vue路由高级语法糖
1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由 ...
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- vue 路由缓存 路由嵌套 路由守卫 监听物理返回
最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...
- vue路由知识整理
vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...
- Vue路由-详细总结
Vue路由vue-router 前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL ...
- Vue路由Hash模式分析
Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...
- Vue路由系统
Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...
- 【Vue路由系统详述】
目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"# ...
随机推荐
- poj-2528线段树练习
title: poj-2528线段树练习 date: 2018-10-13 13:45:09 tags: acm 刷题 categories: ACM-线段树 概述 这道题坑了我好久啊啊啊啊,,,, ...
- Java 中的异常处理机制
生活中的异常: 不能够完整而顺利的完成一些工作 根据不同的异常进行相应的处理,而不会就此终端我们的生活 引出: 异常处理: 方式: 1.选择结构(逻辑判断)避免 demo:if逻辑处理异常 im ...
- TRUNCATE can't with condition
No, TRUNCATE is all or nothing. You can do a DELETE FROM <table> WHERE <conditions> but ...
- python的可变与不可变数据类型
<python的可变与不可变数据类型> python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话,其 ...
- 【差分约束系统/DFS版SPFA】BZOJ3436-小K的农场
[题目大意] 总共n个农场,有以下三种描述:农场a比农场b至少多种植了c个单位的作物,农场a比农场b至多多种植了c个单位的作物,农场a与农场b种植的作物数一样多.问是否有可能性. [思路] 农场a比农 ...
- [BZOJ3928/4048]Outer space invaders
[BZOJ3928/4048]Outer space invaders 题目大意: 有\(n(n\le300)\)个物品,第\(i\)个物品会在\(a_i\sim b_i\)时刻出现,且离你的距离为\ ...
- maven中跳过单元测试(转)
你可能想要配置 Maven 使其完全跳过单元测试. 可能你有一个很大的系统,单元测试需要花好多分钟来完成,而你不想在生成最终输出前等单元测试完成. 你可能正工作在一个遗留系统上面,这个系统有一系列的失 ...
- mysqld --debug=d:t:i:O:n --user=mysql (源码调试)
--debug=d:t--debug=d:f,main,subr1:F:L:t,20--debug=d,input,output,files:n--debug=d:t:i:O,\\mysqld.tra ...
- Oracle的数据类型
Oracle基本数据类型(亦叫内置数据类型 built-in datatypes)可以按类型分为: 字符串类型.数字类型.日期类型.LOB类型.LONG RAW& RAW类型.ROWID &a ...
- Oracle 学习(scott方案)
Oracle学习中,重点是sql语句的学习,而所有的sql语句都要在scott用户下完成. 熟悉这个用户下的四张表,是必要的. 查看所有表名: SELECT * FROM tab; 查看每张表的结 ...