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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
解决在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
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现单词拼写检查
2015/04/25 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python搜索包的路径的实现方法
2019/07/19 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
python统计字符的个数代码实例
2020/02/07 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
《明天,我们毕业》教学反思
2014/04/24 职场文书
《恐龙》教学反思
2014/04/27 职场文书
学校搬迁方案
2014/06/15 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书