VUE页面切换时候 回到顶部

最新推荐文章于 2024-08-01 16:32:32 发布
最新推荐文章于 2024-08-01 16:32:32 发布
阅读量2.6k 收藏 3
点赞数 2
分类专栏： html5 H5开发 vue es6 前端工程化 javascript 文章标签： vue vue-router 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q857637472/article/details/99303203
版权
javascript 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
html5
14 篇文章 0 订阅
订阅专栏
前端工程化
10 篇文章 0 订阅
订阅专栏

VUE页面切换时候 回到顶部

产生问题

如果不加回到顶部，在每次页面切换的时候会产生一小段的时候 header 看不到，在页面加载之后才下来

初试解决办法

Vue-Router内置了一个滚动行为scrollBehavior，我试了试，并没有解决我的问题，看了一下它的调用顺序，大概是在我 页面进去后，created之后再调用的，所以这里并不满足我的需求，我使用afterEach最终解决了我的问题

最终解决办法:

在路由钩子，在路由加载之后立马window.scrollTo(0,0)


router.afterEach((to, from) => {
  window.scrollTo(0, 0)
})
帅气你勇哥
关注
专栏目录
vue页面切换到滚动页面显示顶部的实例
08-27
下面小编就为大家分享一篇vue页面切换到滚动页面显示顶部的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
业务逻辑_vue路由跳转时定位到页面顶部
qq_43260366的博客
11-26 809
仅需要在当前页面（page）合适的位置加入一下代码即可。2.在created函数中。1.在组件-前置守卫中。
vue每次路由跳转前将页面滚动到顶部
最新发布
HWL5679的博客
08-01 664
使用router.beforeEach来在每次路由跳转前将页面滚动到顶部。
vue router页面切换时回到顶部的问题
summer的博客
03-19 1351
router.afterEach(() => { window.scrollTo(0, 0) }); 之前是这么写的，写在router.js里，但是实在太蠢了，页面切换的时候如果第二个页面上的数据渲染慢了点，就会让用户看到页面滚回顶部闪动一下，我查了一下，找到了比较好的方法，就是用router的scrollBehavior，写法是这样： const router = new Router({ base: '/', routes, scrollBehavior(.
点击导航切换路由，默认页面到浏览器顶部
weixin_42396196的博客
11-21 701
// 直接放入main.js即可 router.afterEach((to, from, next) => { window.scrollTo(0, 0) })
Vue后台管理系统页面每次点击跳转位置回恢复在顶部
qq_42384734的博客
04-25 570
因后台侧边栏的菜单过长，导致点击底下的菜单，内容显示下面的内容 在router里的index.js文件最下面配置一下 router.beforeEach((to, from, next) => { document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 next() }) ...
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
在Vue项目中，当使用vue-router进行页面切换时，我们经常需要实现滚动条自动滚动到顶部的效果，以提供用户友好的导航体验。这通常通过利用`Window.scrollTo()`方法来完成，该方法允许我们指定页面滚动到的精确位置。...
vue router 跳转后回到顶部的实例
10-18
// 在main.js中添加代码以实现在路由跳转后页面返回顶部 router.afterEach((to, from, next) => { window.scrollTo(0, 0); }); ``` 上述代码中的router对象是Vue Router实例，afterEach是Vue Router提供的一个全局...
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
在 Vue 项目中，使用路由来切换页面时，页面的滚动位置会被重置为顶部，而不是保持之前的滚动位置。这会导致用户体验不良好，特别是在需要保持滚动位置的场景下。 解决方法 要解决这个问题，我们可以使用 Vue 的 ...
vue单页面，打开新页面时怎么让页面自动滚到顶部？
github_38928905的博客
03-13 2837
在app.vue中，update的生命周期中加： updated() { window.scroll(0, 0); },
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
主要介绍了vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
页面切换，跳转到顶部
蓦然回首，那人却在，灯火阑珊处。
03-18 278
直接在获取数据后跳转顶部 window.scroll(0, 0)
vue+element ui列表使用分页组件 翻页的时候返回页面顶部
小猫爪子
06-16 3367
此时滚动条已经翻到页面底部，更换上一页或者下一页时，重新回到页面顶部。 // 翻页后滚动条回到页面顶端 scrollTop(selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0); }, //切换页面 currentChangeHandle(val) { this.pageIndex = val //找到你想要滚到
vue路由切换时内容组件的滚动条回到顶部
Macao7_W的博客
06-29 2717
vue路由切换时页面滚动到顶部
vue项目实现回到顶部的两种超简单方法
热门推荐
sinat_33255495的博客
03-29 2万+
vue 中实现回到顶部的两种方式： （1）锚点方式 通过点击锚点回到指定位置： <template> <div id="topAnchor" ref="faultTree" class="wrap"> <a id="TOPUp" href="#topAnchor"> <img style="width: 100%;height: 100%;" src="../../../../assets/top.png" alt="">
vue实现刷新页面，页面回到顶部
Baby_加油_的博客
02-17 1931
vue实现刷新页面，页面回到顶部
vue中切换页面自动滚动回到顶部
一呀一转转圈
11-13 5105
应用场景： A页面内容多，有滚动条出现， B页面内容少，没有滚动条， 在 A页面把滚动条下拉到一半，然后点击 B页面，此时B页面也出现了滚动条，这样是不对的，我们想让切换到B页面时 不出现滚动条。 解决办法： 单个页面： // 在/A页面, vue的mounted方法中, 写设置页面滚动条的这个方法 mounted() { // 切换页面时滚动条自动滚动到顶部 window.scrollTo(0,0); } 全部页面：在main.js中 router.afterEach((to
VUE 控制el-tabs标签页切换后滚动条回到顶部
NeverGiveUp_Up的博客
05-17 3016
使用场景：标签页中内容较多时，滚动条滑到底部，切换tab后，滚动条还是在底部； 预期：切换tab后滚动条能回到顶部 代码实现：el-tabs 绑定点击事件 tabChange <el-tabs class="tabs" v-model="activeName" @tab-click="tabChange"> <el-tab-pane label="交互规范" name="first"> <ui-main></ui-m
uniapp切换tab页面回到顶部
08-01
在uniapp中，要实现切换tab页面回到顶部的效果，可以使用以下步骤： 1. 在需要回到顶部的页面，可以在页面的...通过以上步骤，每次切换回到该页面，都会自动回到页面顶部，实现了uniapp切换tab页面回到顶部的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值