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中的window.location.search方法简介
Sep 02 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
如何用JavaScript实现一个数组惰性求值库
May 05 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输出缓存ob系列函数详解
2014/03/11 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
JS原型链怎么理解
2016/06/27 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
2015自愿离婚协议书范本
2015/01/28 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
重阳节慰问信
2015/02/15 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
办公用品管理制度
2015/08/04 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers