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实例收集(20个)
Apr 21 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
js prototype深入理解及应用实例分析
Nov 25 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
用python写asp详细讲解
2013/12/16 Python
python3.5仿微软计算器程序
2020/03/30 Python
python安装教程
2018/02/28 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
Java程序员面试题
2016/09/27 面试题
老公爱的承诺书
2014/03/31 职场文书
食品安全工作方案
2014/05/07 职场文书
文秘应届生求职信
2014/07/05 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
股权转让协议书
2014/12/07 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers