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 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
jquery 上下滚动广告
Jun 17 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php微信开发接入
2016/08/27 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
jquery中的事件处理详细介绍
2013/06/24 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python Django 创建应用过程图示详解
2019/07/29 Python
详解python变量与数据类型
2020/08/25 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
医学专业毕业生推荐信
2013/11/14 职场文书
优秀经理事迹材料
2014/02/01 职场文书
家长会标语
2014/06/24 职场文书
公证委托书
2014/08/01 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
golang特有程序结构入门教程
2021/06/02 Python