vue路由跳转后页面未置顶显示

最新推荐文章于 2024-04-15 09:10:35 发布
最新推荐文章于 2024-04-15 09:10:35 发布
阅读量400 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syx_cainiao/article/details/111594342
版权
博客讲述了在Vue应用中遇到路由跳转后页面未置顶显示的问题，尝试了两种解决方案。首先尝试在全局路由守卫router.beforeEach中设置页面定位，但因过于繁琐而放弃。接着采用Vue Router官方提供的方法，通过异步处理页面过渡事件，成功实现了路由切换时页面滚动到顶部的效果，从而解决了问题。
摘要由CSDN通过智能技术生成

在登录页面输入用户名和密码之后跳转到主页面，浏览器可视区域上部显示的不是主页面的header部分，后来发现无论从哪一页面跳转到主页面，显示的都不是页面的header。
此时解决问题的思路就很明了了
就问题而言，在路由跳转时或者后，把页面定位设置成 x: 0, y: 0

第一种想法：
在路由的全局导航守卫router.beforeEach添加

window.scrollTo(0,0)

但是没好用，我得在路由元中meta添加一个title属性，然后用 document.title=to.meta.title修改当前页面的title，麻烦，直接弃掉

第二种想法（官网提供方法）：
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

scrollBehavior
最低0.47元/天 解锁文章
vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7337
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
vue实现置顶
Y_one的博客
10-15 1978
new.json 数据代码： [ {"id": "G11111","title": "手机","price": 2999}, {"id": "G22222","title": "平板电脑","price": 1999}, {"id": "G33333","title": "笔记本电脑","price": 5999}, {"id": "G44444","title": "树莓派电脑","price": 999}, {"id": "G55555","title": "超级计算机","pric
单页面和多页面的区别
Mr_qinyivue的博客
10-19 733
单页面和多页面应用有什么区别？ 单页面应用（SPA），通俗点说就是指只有一个主页面的应用，浏览器一开始要夹菜所有必须的的html，css，js，所有的页面内容都包含在这个所谓的主页面中。但写的时候，也要分开来写，（页面片段），然后在交互的时候由程序动态载入，单页面的跳转，仅刷新局部资源，多应用于PC端。 多页面应用（MPA）,就是指一个应用中有多个页面，页面跳转时是整页刷新。 优点： 1.用户体验好，速度快，页面内容改变时，不需要整页面刷新。 2.前后端分离 3.页面效果比较炫酷（如：切换页面内容时的专场动
【劉】---------------单页面和多页面的区别
weixin_30478757的博客
12-26 543
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新 单页面的优点： 1，用户体验好，...
单页面与多页面的区别
热门推荐
wuyxinu的博客
12-14 1万+
之前在一个视频面试的时候，被面试官问到这个问题，结果自己混乱答了一下，后面才发现自己混淆了它们的概念，所以特地来学习一下单页面和多页面的区别。 单页面，顾名思义只有一个界面。（SinglePage Web Application，SPA） 只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站 ...
VUE——解决跳页面跳转后 新页面没有位于顶部的问题
qq_39206750的博客
01-08 2957
01 问题： 页面通过路由调转后，新页面停留的位置与上一级页面一致 02. 解决 在配置路由时候 加上：scrollBehavior:() => ({ y = 0 }), const router = new VueRouter({ scrollBehavior: () => ({ y: 0 }), routes: [ ] }) 03. 原因 使用组件缓存时 再次切换...
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
在路由跳转时，Vue 会将页面滚动到顶部，这是因为 Vue 的路由机制会将页面滚动到顶部，而不是保持之前的滚动位置。 Watch 机制 在 Vue 中，watch 机制是一个非常重要的机制，用于监测数据的变化。当数据变化时，...
三种方法实现Vue路由跳转时自动定位在页面顶部
"✧treasure mountain✧"
05-12 2392
在做Vue项目的时候发现 当路由跳转时 页面是不会自动跳转到顶部的 而是停留在当前已滚动的距离 实现方法其实很简单 共有三种方法可实现页面自动跳转到顶部 在路由的main.js(router.js)里添加如下代码即可： 方法一： // 跳转后自动返回页面顶部 router.afterEach(() => { window.scrollTo(0,0); }) 方法二： const router = new VueRouter({ routes:[...], scrollBehavior
vue路由跳转滚动条置顶
09-01
这就是如何在Vue中实现路由跳转时将滚动条置顶的方法。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [vue 切换路由页面时，滚动条滚动到最上面]...
vue路由跳转时进入新的页面，但位置却不在顶部
IT水很深，路还很长
08-02 2179
（1）问题背景 路由跳转时进入新的页面，但位置却不在顶部，而是在上个页面浏览的位置，在每次进入新页面时，想让它定位在页面的顶部。 方式一 main.js router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox document.documentEleme...
vue项目中跳转页面后显示内容不在顶部
yycnf的博客
02-05 681
vue项目中跳转页面后显示内容不在顶部 原因：在项目中使用了el-scrollbar组件，导致scrollTop始终为0 解决办法：1、给el-scrollbar组件ref属性，ref=scrollTop 2、监听$route 3、在路由改变时执行this.$refs.scrollTop.wrap.scrollTop=0 这样就解决了跳转路由后自动回到顶部 ...
多页面与单页面应用的区别
心若向阳，无谓悲伤的博客
12-04 7373
虽然接触web开发有一段时间了，但从头开始构建一个完整的web项目的机会非常少，对于一些概念还很模糊，今天首先来梳理一下在应用开发中，单页面应用和多页面应用的区别。 其实从字面意思上理解，就很好理解了。 单页面，顾名思义只有一个界面。 界面是通过URL来定位的，所以单页面应用从头到尾它的html地址都是不变的，注意哦，是html地址，而不是URL地址，这两者还是有点区别的。html地址是截止...
单页面与多页面间的区别及优缺点
sunlizhen的专栏
06-05 1383
单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。 多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新 单页面的优点： 1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小 2，前后端分离 3，页面效果会比较炫酷（比
单页面和多页面区别
最新发布
m0_73300433的博客
04-15 1702
页面的切换其实就是组件的切换、所有跳转方式都是通过组件切换完成的！每个页面都是独立的HTML文件都需要去加载js、cssd等文件2跳转的时候通过刷新页面从而去重新加载新的HTML页面！单页面：页面片段间时间的切换快，用户体验良好，当初次加载文件过多时，需要做相关调优。多页面：页面切换加载缓慢，流畅度不够，用户体验比较差，尤其网速慢的时候。单页面：单页面的路由有hash、history（默认是hash路由）单页面：页面进行的局部刷新、组件之间的开会切换。多页面：多个完整的HTML页面。
单页面与多页面区别
sunny1660的博客
11-14 561
多页面应用（SinglePage Web Application，SPA） 只有一个主页面的应用，浏览器一开始要加载所需要的html、js、css。公共资源（js、css等）仅需加载一次，然后在交互的时候有路由程序动态载入，单页面的页面调转，仅刷新局部资源。多用于于pc端. 多页面（MultiPage Application，MPA） 就是指一个应用中有多个页面，页面跳转时是整页刷新,每个公共资源...
单页面多页面区别
smallico的博客
05-25 331
单页面与多页面的区别: 单页面 多页面 组成:有一个主要页面和其他片段页面组成 由多个完整页面组成 css、js公用加载 每个页面都分开加载 url模式：a.com/#/pageone a.com/#/pagetwo url模式：a.com/pageone.html a.com/pagetwo.html 刷新方式:局部刷新 刷新方式:整个页面刷新 用户体验较好 体验较差,页面切换速度比较慢 参数传递:容易 依赖cookie localstorage、url传递等 搜索
vue 子路由跳转不显示页面
07-27
可能有几个原因导致子路由跳转后不显示页面。以下是一些可能的解决方法： 1. 确保你已经正确配置了子路由。在 Vue 的路由配置文件中，确保你已经正确定义了子路由，并将其添加到父级路由的子路由数组中。 2. 检查你的子组件是否正确加载。在子组件文件中，确保你已经正确导入并注册了该组件。 3. 检查你的路由跳转代码。确认你使用了正确的路由跳转方法。在 Vue 中，你可以使用 `router.push` 或 `router.replace` 方法来进行路由跳转。 4. 检查你的模板代码。确保你在父组件的模板中使用了 `<router-view>` 标签来显示子组件。 5. 检查你的子组件是否有正确的路径匹配。在路由配置中，确保你的子路由的路径与你尝试访问的 URL 路径匹配。记住，Vue 的路由是基于路径匹配的。 如果以上方法都没有解决你的问题，我建议你提供更多的代码或详细描述，以便我能够更好地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值