使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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滚动行为控制锚点的更多相关文章

  1. 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

    超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...

  2. vue路由高级语法糖

    1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active. 模板中可以用{{$route.params.xxx取到路由 ...

  3. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  4. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

  5. vue路由知识整理

    vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...

  6. Vue路由-详细总结

    Vue路由vue-router   前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL ...

  7. Vue路由Hash模式分析

    Vue路由Hash模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当URL改变时页面 ...

  8. Vue路由系统

    Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...

  9. 【Vue路由系统详述】

    目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"# ...

随机推荐

  1. poj-2528线段树练习

    title: poj-2528线段树练习 date: 2018-10-13 13:45:09 tags: acm 刷题 categories: ACM-线段树 概述 这道题坑了我好久啊啊啊啊,,,, ...

  2. Java 中的异常处理机制

    生活中的异常:  不能够完整而顺利的完成一些工作 根据不同的异常进行相应的处理,而不会就此终端我们的生活 引出:  异常处理: 方式:  1.选择结构(逻辑判断)避免 demo:if逻辑处理异常 im ...

  3. TRUNCATE can't with condition

    No, TRUNCATE is all or nothing. You can do a DELETE FROM <table> WHERE <conditions> but ...

  4. python的可变与不可变数据类型

    <python的可变与不可变数据类型>     python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话,其 ...

  5. 【差分约束系统/DFS版SPFA】BZOJ3436-小K的农场

    [题目大意] 总共n个农场,有以下三种描述:农场a比农场b至少多种植了c个单位的作物,农场a比农场b至多多种植了c个单位的作物,农场a与农场b种植的作物数一样多.问是否有可能性. [思路] 农场a比农 ...

  6. [BZOJ3928/4048]Outer space invaders

    [BZOJ3928/4048]Outer space invaders 题目大意: 有\(n(n\le300)\)个物品,第\(i\)个物品会在\(a_i\sim b_i\)时刻出现,且离你的距离为\ ...

  7. maven中跳过单元测试(转)

    你可能想要配置 Maven 使其完全跳过单元测试. 可能你有一个很大的系统,单元测试需要花好多分钟来完成,而你不想在生成最终输出前等单元测试完成. 你可能正工作在一个遗留系统上面,这个系统有一系列的失 ...

  8. 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 ...

  9. Oracle的数据类型

    Oracle基本数据类型(亦叫内置数据类型 built-in datatypes)可以按类型分为: 字符串类型.数字类型.日期类型.LOB类型.LONG RAW& RAW类型.ROWID &a ...

  10. Oracle 学习(scott方案)

      Oracle学习中,重点是sql语句的学习,而所有的sql语句都要在scott用户下完成. 熟悉这个用户下的四张表,是必要的. 查看所有表名: SELECT * FROM tab; 查看每张表的结 ...