vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法


Posted in Javascript onNovember 28, 2017

有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法。

语法就是:scrollTo(xpos,ypos)

xpos:必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos:必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

例如滚动内容的坐标位置100,500:

window.scrollTo(100,500);

好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为。

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 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
  }
 }
}

我们还可以利用路由元信息更细颗粒度地控制滚动。

routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]

完整的例子:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
 template: `
  <div>
   bar
   <div style="height:500px"></div>
   <p id="anchor">Anchor</p>
  </div>
 `
}
// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
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
  }
  // check if any matched route config has meta that requires scrolling to top
  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 = 0
   position.y = 0
  }
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  return position
 }
}
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 scrollBehavior,
 routes: [
  { path: '/', component: Home, meta: { scrollToTop: true }},
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar, meta: { scrollToTop: true }}
 ]
})

new Vue({
 router,
 template: `
  <div id="app">
   <h1>Scroll Behavior</h1>
   <ul>
    <li><router-link to="/">/</router-link></li>
    <li><router-link to="/foo">/foo</router-link></li>
    <li><router-link to="/bar">/bar</router-link></li>
    <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
   </ul>
   <router-view class="view"></router-view>
  </div>
 `
}).$mount('#app')

在网上查了一下,网友说还可以试试在main.js入口文件配合vue-router写这个

router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});

总结

以上所述是小编给大家介绍的vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
jQuery实现跨域
Feb 03 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 #Javascript
vue-music关于Player播放器组件详解
Nov 28 #Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 #Javascript
JS实现的找零张数最小问题示例
Nov 28 #Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 #Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 #Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 #Javascript
You might like
PHP用反撇号执行外部命令
2015/04/14 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
Django实现的自定义访问日志模块示例
2017/06/23 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
个人自我剖析材料
2014/02/07 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
社会实践活动总结报告
2014/04/29 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
Java 数组的使用
2022/05/11 Java/Android