在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置，要切换路由的时候滚动条回到顶部才有更好的用户体验

1、当页面整体都要滚动到顶部的情况

router.afterEach(() => {

  document.body.scrollTop = 0;

  document.documentElement.scrollTop = 0;

}）

2、当页面中的其中一个组件中需要滚动到顶部的时候

 watch: {

    $route(to) {

      //监听路由变化的时候使滚动条回到顶部

      this.$refs.content2.scrollTo(0,0)

    }

}

其中this.$refs获取页面中添加ref属性的元素，上面的content2就是滚动的元素添加的ref属性为content2

通过监听路由的变化来实现路由切换时的滚动条回到顶部

vue路由切换时内容组件的滚动条回到顶部的更多相关文章

  1. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  2. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  3. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  4. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  5. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  6. vue 中<vue-scroll >滚动条回到顶部

    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...

  7. vue-router组件重用 路由切换时的问题

    当一个组件被重用时,切换路由,该组件不会被销毁.该组件的created也不会被调用,如果在created中有获取数据的操作,切换路由后,就不会再获取新的数据了,界面上就没有刷新. 其实官方文档就有解决 ...

  8. 当vue路由变化时 改变导航条式样

    这个是导航栏: <router-link to="/unusedOrder"> <div class="">路由1</div> ...

  9. 基于vux的Vue路由切换动画

    const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...

随机推荐

  1. UiPath： Selectors repair 选择器的修复，即被选择的按钮发生改变如何选择第二按钮

    实现批量注册用户功能时,出现第一个用户注册完时,弹出确认按钮,点击即可,但是第二个用户注册完成时,弹出的按钮与第一个有差异,图形用户界面元素及其父元素的属性都发生改变.所以就点不了按钮,就卡死在这.如 ...

  2. tomcat 多实例部署

    tomcat 配置多个实例 参考文档 聊聊 Tomcat 的单机多实例 https://www.cnblogs.com/mafly/p/tomcat.html 极客学院 Tomcat 8 权威指南 h ...

  3. vue社区活跃整合

    ===框架===== Nuxt(vue ssr服务端渲染) Quasar Framework 一个可以搭建多平台响应式网站的框架 Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架. = ...

  4. STM32片上Flash容量大小命名规则

  5. VS Code配置Python

    安装 1.安装python插件 直接在VS Code里搜索“Python”插件,安装. 2.下载Python 去官网下载Python 其他的插件在第一次运行Python程序会提示,按要求安装即可. 运 ...

  6. Linux提高工作效率的命令

    find ./ -name 'laun*'|xargs grep 8881 在laun开头的文件内查找8881 find ./ -name 'laun*' find . -type f -mtime ...

  7. js中的自动包装机制

    有一行语句: 1.toString() //error 那么问题来了,为什么报错? 我的第一想法就是1是一个基本类型,所以它没有toString方法 嗯,理直气壮 接下来有大佬show me code ...

  8. shell中echo输出换行的方法

    [~]#echo "Hello world.\nHello sea" Hello world.\nHello sea [~]#echo -e "Hello world.\ ...

  9. R包的安装 卸载 加载 移除等

    R包的安装 1)使用 Rstudio 手动安装 Rstudio的窗口默认为四个,在右下角的窗口的 packages 下会显示所有安装的 R 包 点击 Install -> 输入R 包名 -> ...

  10. jiagu-工具使用

    比较好的一套处理工具吧,感谢作者,原文地址:https://github.com/ownthink/Jiagu 练习一下使用 """ Funciton: jiagu测试 ...