vue路由跳转之后页面停留在上一个浏览页面位置不会回到顶部

程序媛养成记

已于 2022-01-26 09:18:06 修改

阅读量1.3k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-01-26 09:16:20 首次发布

本文链接：https://blog.csdn.net/cxy980626/article/details/122695453

版权

本文介绍了如何解决Vue.js应用中路由切换后页面滚动位置保持在之前位置的问题。在App.vue组件中添加相应代码，确保每次路由变化时页面会滚动到顶部。

摘要由CSDN通过智能技术生成

解决方案：

在App.vue中添加如下代码：

watch: {
   
    $route: function (to, from) {
   
      if(from.name == 'pLindex'){
   
        document

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序媛养成记

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 项目刷新页面, 保留当前页面状态

weixin_46317118的博客

02-27

8752

问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 localStorage/sessionStorage里存储以登录信息为例: 每次登录成功, 将用户名存进webstorage(根据具体需求去选择localSt...

vue页面跳转后返回原页面初始位置方法

11-28

在Vue.js应用中，当用户从一个页面跳转到另一个页面，然后按返回按钮返回原始页面时，通常希望用户能够回到他们离开时的位置。要实现这个功能，我们可以利用Vue的生命周期钩子、Vuex状态管理器以及Vue Router的特性...

参与评论您还未登录，请先登录后发表或查看评论

VUE3.0 路由跳转之后页面停留在上一个浏览页面位置不会回到顶部问题

七月

05-29

1802

方式一：普通用法，vue2.0也可用。方式二： setup 语法糖时。

vue3项目路由跳转，地址改变了但是页面并没有变怎么解决

最新发布

肖肖肖丽珠的博客

08-23

430

= '首页') {//如果页面没有成功跳转到首页就自动刷新。如果是vue3+ts可以这样。

vue路由跳转时进入新的页面，滚动条的位置停留在上个页面的位置，没有回到顶部

ITCwg的博客

01-27

1160

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动在router下的index.js文件加上以下代码下面展示一些内联代码片。 router.afterEach((to, from, next) => { document.querySelector("body").setAttribute("style", "overflow: auto !important;")

vue页面跳转之后位置还在上一个页面的位置

qq_59297167的博客

03-15

1278

【代码】vue页面跳转之后位置还在上一个页面的位置。

Vue路由跳转新页面，新页面不在顶端问题

weixin_43732080的博客

05-26

623

设置"滚动条高度"解决滚动条高度设置方法：window.scrollTo(p1, p2) window.scrollTo(param1, param2) param1: x轴坐标，距离屏幕左上角x轴距离 param2: y轴坐标，距离屏幕左上角y轴距离结合此方法，实现Vue跳转新页面，新页面置顶新页面mounted()中：（mounted()是Vue生命周期函数，在页面渲染前执行） mounted() { this._loadNewPage(); }, 新页面methods.

vue 实现路由跳转时更改页面title

10-16

在Vue应用中实现路由跳转时更改页面标题是一项常见的需求，它能够改善用户体验，让浏览器的标签页标题与当前用户访问的页面内容保持一致。本篇将详细介绍如何在Vue项目中，利用Vue Router来实现路由跳转时自动更改...

解决vue多个路由共用一个页面的问题

08-27

//其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。 } } ``` 在上面的代码中，我们使用 watch 监听 $route...

vue返回上一页面时回到原先滚动的位置的方法

10-17

当用户从一个详情页面返回到之前的列表页面时，用户体验通常要求保持之前页面的滚动位置，而不是返回到页面顶部。本文就如何在使用Vue.js开发的应用中实现返回上一页面时回到之前滚动位置的方法进行了详细介绍。 ...

vue中页面跳转拦截器的实现方法

08-29

Vue.js中页面跳转拦截器是一种控制用户访问权限的技术，通常用于在用户跳转到某个页面之前，判断用户是否具有访问该页面的权限。在单页面应用中，Vue Router是实现路由管理的重要工具，而拦截器则是保证应用安全性和...

Vue路由跳转新页面无法回到顶部怎么解决

刘旭的博客

04-24

1423

背景 Vue页面路由跳转后，页面的位置是和上个页面位置一致的，没有自动定位到顶部。解决在 main.js中添加代码即可解决 router.afterEach(() => { document.documentElement.scrollTop = 0; })

解决vue页面跳转之后，页面没有回到顶部的问题

逆风优雅的博客

01-19

2077

问题展示：解决方法：使用路由的前置钩子(路由守卫) router.beforeEach((to, from, next) => { // 路由跳转后，让页面回到顶部 // chrome document.body.scrollTop = 0; // firefox document.documentElement.scrollTop = 0; // safari window.pageYOffset = 0; // 调用 next()，一定要调用 next 方法，否则钩

解决vue路由跳转页面之后页面不从最顶端显示问题

dbzh1979的博客

07-18

1146

在router/index.js文件中 const router = new VueRouter({ scrollBehavior(to,from,saveTop){ if(saveTop){ return saveTop; }else{ return {x:0,y:0} } }, }) 转载于:https://www.cnblogs.com/wxyz9527/p/11206734...

解决Vue页面跳转后，位置不在顶部

just

04-10

5750

背景 Vue页面路由跳转后，页面的位置是和上个页面位置一致的，没有自动定位到顶部。解决我是使用Vue CLI3，所以在main.js中定义scrollBehavior即可解决： const router = new VueRouter({ // history模式，去除URL中# mode: 'history', routes, // 解决路由跳转后，不显示在首...

vue3+nuxt3 进行页面跳转时页面不会回到顶部问题

weixin_49684489的博客

11-24

1665

vue3+nuxt3 进行页面跳转时,页面不会回到顶部问题

Vue页面跳转后当前位置不在顶部的解决办法

ObcEIGHTEEN的博客

06-15

748

Vue页面跳转后当前位置不在顶部的解决办法 1.route 路由文件下index.js下添加 routes:[], -> scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0} } 解决啦

vue 切换“页面”（路由）时保持滚动条回到顶部

Kris的博客

12-25

6139

vue项目做pc端的时候，发现在两个页面切换时滚动条没有回到顶部而是保持原先的位置，这是由于vue是单页面应用，只是更换了路由内容，还在当前页面滚动条是不会回到顶部的。解决办法是在切换路由的时候，将滚动条复位为0。在App.vue文件下，添加watch事件，全局监听路由，亲测有效。 components:{ publicTop, publicFooter, }, // 使用watch 监听K...

Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部

前端开发小白9527

09-07

1280

Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部

vue 路由跳转打开另一个页面

05-20

在 Vue 路由中，可以使用 `router-link` 组件来创建一个链接，然后在点击链接时自动跳转到指定页面。例如，你想在点击一个按钮时跳转到另一个页面，可以在模板中添加以下代码： ```html <router-link to="/other-page"> <button>跳转到另一个页面</button> </router-link> ``` 其中，`to` 属性指定了要跳转的页面路径。如果不想使用 `router-link` 组件，也可以通过编程式导航来实现跳转。在 Vue 组件中，可以通过 `$router` 对象来访问路由实例，并调用其 `push` 方法来实现跳转。例如： ```js // 在组件中跳转到另一个页面 this.$router.push('/other-page'); ``` 注意，在使用编程式导航时，需要保证当前组件已经挂载到页面中，否则可能会出现无法跳转的问题。