首页 > 其他分享 >Vue路由跳转后,页面和滚动条不在最顶部。

Vue路由跳转后,页面和滚动条不在最顶部。

时间:2022-10-14 18:34:25浏览次数:50  
标签:Vue 顶部 滚动条 跳转 路由 页面

在路由跳转后,页面以及滚动条保持在当前位置,没用回到最顶部怎么办?

解决方法如下:

在main.js中加入以下代码

router.afterEach((to,from,next)=>{
window.scrollTo(0,0)
})
第一个0为回到的x的位置,
第二个0为回到的y的位置。

(*^▽^*)(*^▽^*)(*^▽^*)(*^▽^*)(*^▽^*)(*^▽^*)(*^▽^*)(*^▽^*)(*^▽^*)

标签:Vue,顶部,滚动条,跳转,路由,页面
From: https://www.cnblogs.com/flsa/p/16792579.html

相关文章

  • 前端Vue2-Day50
    Vue内置指令:v-bind:单向绑定解析表达式,可简写为:xxx。v-model:双向数据绑定。v-for:遍历对象、数组、字符串。v-if:条件渲染(动态控制节点是否存在)v-else:条件渲染(动态控制节......
  • Vue3 +elementUI + wangEditor 富文本编辑器
    哎呀,一个富文本编辑器折腾了我好久啊,刚开始找的就是wangEditor,但是上传图片的调接口,我就寻思找个简单的,后来换了quill可以不调接口上传图片,但是v-model绑定不了,而且一直......
  • Vue3动态路由传参;获取动态路由传入参数;
           路由文件,配置动态路由( /:  -后面的tabsItem为参数名称,参数名后的?号 -使参数可以为空而不报错  )1{2//关于我们3......
  • vue3 + pinia实现简单购物车功能
    这个小例子是学习vue3与pinia状态管理工具时写的一个简单的购物车功能,它实现了从模拟接口(node.js的json-server提供)读取商品数据,到添加商品到购物车和购物车中删除商品......
  • vue3 + qiankun(微前端)
    主服务路由配置constrouter=createRouter({history:createWebHistory(),routes:[{path:`/jupiter:page*`,name:`jupiter`,compo......
  • vite vue3 规范化与Git Hooks
    在《JS模块化》系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的“四个现代化”:工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发......
  • Vue的基本原理
    创建vue实例,会遍历data中的属性,由object.defineProperty将其转为getter和setter,并追踪其依赖,当属性被访问或发生改变时会通知相应的watcher程序段在组件渲染的过程钟将其标......
  • vue 全局过滤器
     官网是这样描述的“Vue.js允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从2.1.0+开始支持)。过......
  • vue 实现动态columns,通过后台数据库存储字段,不同的表显示不同的列
    问题:vue前台定义columns太麻烦,每次需要手工定好列,如何通过数据库预留列字段,填充到前台columns中<h-tableautoHeadWidth="true"notSetWidth="true":columns="......
  • vue项目提高性能
    如何提高页面性能?精灵图、字体图标、图片懒加载或使用base64格式图片css,js文件压缩,代码复用,组件化使用CDN网络托管数据懒加载:分页,按需加载(下拉加载)......