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

 更新时间:2017年11月28日 14:01:54   作者:风雨后见彩虹  
这篇文章主要介绍了vue项目中在使用vue-router切换页面的时候滚动条自动滚动到顶部的实现方法,一般使用Window scrollTo() 方法实现,本文给大家简单介绍了crollTop的使用,需要的朋友可以参考下

有时候我们需要页面滚动条滚动到某一固定的位置,一般使用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切换页面时滚动条自动滚动到顶部的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue.use()和Vue.prototype使用详解

    Vue.use()和Vue.prototype使用详解

    Vue.use()主要用于注册全局插件,当插件具有install方法时,调用Vue.use()可以全局使用该插件,Vue.prototype用于注册全局变量,这些变量在项目任何位置都可以通过this.$变量名访问,两者的主要区别在于Vue.use()用于插件,Vue.prototype用于变量
    2024-10-10
  • Vue插槽slot全部使用方法示例解析

    Vue插槽slot全部使用方法示例解析

    插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签,这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
    2023-03-03
  • 关于VueRouter导入的全过程

    关于VueRouter导入的全过程

    这篇文章主要介绍了关于VueRouter导入的全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue报错Failed to execute 'appendChild' on 'Node'解决

    vue报错Failed to execute 'appendChild&apos

    这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue两个版本的区别和使用方法(更深层次了解)

    Vue两个版本的区别和使用方法(更深层次了解)

    在我们使用 vue时,我们可以引用两个不同版本的 Vue,分别是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它们的区别是什么呢,今天我们就来分析下这两个不同版本之间的区别,一起看看吧
    2020-02-02
  • 解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

    解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

    这篇文章主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解如何使用vue实现可视化界面设计

    详解如何使用vue实现可视化界面设计

    Vue是一款流行的前端开发框架,它的响应式数据绑定和组件化特性使得它成为了可视化界面设计的一个理想选择,本文将介绍如何使用Vue实现可视化界面设计,并且演示一个基于Vue的可视化界面设计案例,需要的朋友可以参考下
    2023-12-12
  • vue-router路由与页面间导航实例解析

    vue-router路由与页面间导航实例解析

    vue-router 是一个插件,需要在 Vue 的全局引用中通过 Vue.use()将它引用到 Vue 实例当中。接下来通过本文给大家分享vue-router路由与页面间导航,需要的朋友参考下吧
    2017-11-11
  • 解决vue项目F5刷新mounted里的函数不执行问题

    解决vue项目F5刷新mounted里的函数不执行问题

    今天小编就为大家分享一篇解决vue项目F5刷新mounted里的函数不执行问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 非常实用的vue导航钩子

    非常实用的vue导航钩子

    这篇文章主要为大家分享了一个非常实用的vue导航钩子,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论