Vue3中页面滑到最下面,然后跳转新页面后新页面的位置还是在之前浏览的位置

这个问题可以通过以下两种方式来解决:

  1. 使用路由跳转前获取当前页面的滚动位置并将其作为参数传递给新页面,在新页面加载时将滚动位置设置为传递过来的位置。

例如:

// 在当前页面中获取滚动位置 const scrollPosition = window.scrollY || window.pageYOffset; // 使用路由跳转并将滚动位置作为参数传递给新页面 router.push({ path: '/newpage', query: { scrollPosition } });

// 在新页面中获取传递过来的滚动位置并设置为页面的滚动位置 mounted() { const scrollPosition = this.$route.query.scrollPosition; window.scrollTo(0, scrollPosition); }

  1. 使用浏览器的历史记录管理API(history API)来存储页面的滚动位置,然后在新页面加载时从历史记录中获取并设置滚动位置。

例如:

// 在当前页面中将滚动位置存储到历史记录中 const scrollPosition = window.scrollY || window.pageYOffset; history.replaceState({ scrollPosition }, ''); // 使用路由跳转到新页面 router.push('/newpage');

// 在新页面中获取历史记录中的滚动位置并设置为页面的滚动位置 mounted() { const state = history.state || {}; const scrollPosition = state.scrollPosition || 0; window.scrollTo(0, scrollPosition); }


这个问题可以通过使用Vue Router中的scrollBehavior属性来解决。scrollBehavior属性用于定义页面跳转时的滚动行为。您可以在Vue Router中添加以下代码来解决该问题:

复制代码
const router = new VueRouter({
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes: [...]
})

在上面的代码中,我们使用了scrollBehavior属性,并在其中检查了savedPosition参数。savedPosition参数保存了当前页面的滚动位置,如果存在此位置,则跳转到新页面时就会保留该位置,否则将滚动到页面的顶部。


这个问题实际上不是Vue3的具体问题,而是浏览器的默认行为。在跳转到新页面时,浏览器会尝试保留上一个页面的滚动位置。但您可以通过JavaScript来解决这个问题。

一种解决方法是在新页面中添加以下代码:

复制代码
window.onload = function() {
  window.scrollTo(0,0);
}

这将在新页面加载时将滚动位置重置为顶部。

另一种方法是使用Vue Router,在路由切换时使用 scrollBehavior 方法来实现滚动位置的控制。例如:

复制代码
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

这将在路由切换时,如果有保存的滚动位置,则返回此位置,否则返回顶部。


这种情况可能是因为你没有在跳转页面时进行页面滚动的重置,可以通过以下几种方式进行解决:

在路由切换时,使用scrollTo方法将页面滚动回顶部:

javascript 复制代码
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { top: 0 }
  }
})

在页面跳转时,手动将页面滚动到顶部:

javascript 复制代码
mounted() {
  window.scrollTo(0, 0)
}

在页面卸载时,使用钩子函数将页面滚动重置为顶部:

javascript 复制代码
beforeUnmount() {
  window.scrollTo(0, 0)
}
相关推荐
用户84298142418103 分钟前
JavaScript数据类型
javascript
非凡ghost5 分钟前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端
over69724 分钟前
JavaScript变量声明:var、let、const的完整指南
javascript
7ayl25 分钟前
Vue3 - Reactivity的核心流程
前端·vue.js
The 旺26 分钟前
【AI编程实战】零基础用ChatGPT+Cursor开发完整Web应用:30分钟从idea到上线
前端·chatgpt·ai编程
sulikey37 分钟前
Qt 入门简洁笔记:信号与槽
前端·c++·笔记·qt·前端框架·1024程序员节·qt框架
十年_H40 分钟前
Cesium自定义着色器:分量修改与完全赋值
javascript·cesium
SepstoneTang40 分钟前
前端新手入门-HBuilder工具安装
html·html5·1024程序员节
Zyx200740 分钟前
从零学 JavaScript:彻底搞懂 var、let、const(上篇)——告别变量提升的坑
javascript
袁煦丞41 分钟前
安卓旧机变服务器,KSWEB部署Typecho博客并实现远程访问:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作