Nuxt跳转页面 滚动条不会回到顶部

最新推荐文章于 2024-07-05 15:25:49 发布
最新推荐文章于 2024-07-05 15:25:49 发布
阅读量2k 收藏
点赞数 2
分类专栏： nuxt 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41852038/article/details/121990209
版权

Nuxt 跳转页面的时候滚动没有回到顶部

脑壳疼 刚遇到这个问题的时候百度了半天也没找到对应的解决办法
然后 英文渣宰被逼去读英文文档

发现滚动条没有回到顶部的原因是 路由嵌套

就像这种
在这里插入图片描述

如果没有父子页面的嵌套 nuxt默认跳转的时候滚动条会在顶部

解决方案

官方文档里面写的很清楚 传送门
在这里插入图片描述

只需要在顶部添加 即可解决
在这里插入图片描述

scrollToTop: true,
大松呀
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
nuxt-page-transition-and-anchor-handler:在页面过渡之前滚动到顶部，处理锚链接，并在页面之间交叉溶解
05-03
当您执行Install的第二步时，此方法效果最佳，使页面在过渡开始之前滚动到顶部。安装yarn add nuxt-page-transition-and-anchor-handler或npm install nuxt-page-transition-and-anchor-handler 将nuxt-page-...
Nuxt页面级缓存的实现
10-15
主要介绍了Nuxt页面级缓存的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3+nuxt3 进行页面跳转时 页面不会回到顶部问题
weixin_49684489的博客
11-24 1469
vue3+nuxt3 进行页面跳转时,页面不会回到顶部问题
Nuxt3 如何在页面加载完成回到顶部
sinat_37170738的博客
07-05 336
我们可以在官方文档中，找到 useNuxtApp 的说明是一个内置的可组合函数，它提供了一种访问 Nuxt 共享运行时上下文的方式，该上下文在客户端和服务器端都可用。它帮助你访问 Vue 应用程序实例、运行时钩子、运行时配置变量和内部状态，如 ssrContext 和 payload。
Nuxt.js 页面跳转后不会滚动至顶部，以及路由守卫应用
weixin_43990297的博客
11-10 6645
在做项目的过程中，遇到页面切换后不会滚动到顶部 解决方案： 在页面使用的layout中或者页面中，使用监听 watch: { '$route': function(to,from){ document.body.scrollTop = 0 document.documentElement.scrollTop = 0 this.$refs.scrol...
【vue3+nuxt router.push进行页面跳转时 页面不会回到顶部问题解决】
weixin_56501064的博客
09-05 2807
vue3+nuxt router.push进行页面跳转时，页面不会回到顶部问题解决啦，大家如果遇到类似问题可以参考！
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
jililin123的博客
08-09 1620
Vue路由跳转页面，滚动条的位置停留在上个页面的位置，没有回到顶部
nuxt 切换路由，页面回到顶部
木槿之夏
04-21 3557
1.全局设置切换路由页面回到顶部 在nuxt.config.js：中配置 module.exports = { router: { scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } } } 2默认情况下，从当前页面切换至目标页面时，Nuxt.js 会让目标页面滚动至顶部。但是在嵌套子路由的场景下，Nuxt.js 会保持当前页面的滚动位置，除非在子路由的页面组件中将 scrollToTo
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
08-28
返回一个包含`x`和`y`坐标的对象将使页面滚动到指定位置，如`return { x: 0, y: 0 }`，这将使滚动条回到顶部。 如果想在用户点击后退/前进按钮时恢复之前的滚动位置，可以这样做： ```javascript scrollBehavior ...
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
01-21
路由跳转代码如下： <li><nuxt to={name:>HOME page</nuxt> <li><nuxt to={name:>NEWS page</nuxt> <li><nuxt to={name:>PLAY page</nuxt> 注意说明： to 前面有冒号“ : ” to 后面跟的是路径比如“/page/...
Vue在 Nuxt.js 中重定向 404 页面的方法
10-17
主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
解决vue路由跳转页面之后页面不从最顶端显示问题
mhx123456789的博客
07-21 246
解决vue路由跳转页面之后页面不从最顶端显示问题
【Nuxt3】Tailwind 项目去除页面滚动条
m0_56699208的博客
02-27 548
在Web开发中，滚动条是一个常见的用户界面元素，但有时候我们希望在某些页面上去除滚动条，以便提供更好的用户体验。在Nuxt3项目中，我们可以使用Tailwind CSS来实现这个功能。在Nuxt3项目中，我们可以通过安装和配置Tailwind CSS来使用它。接下来，我们需要在Nuxt3项目的nuxt.config.js文件中引入这个自定义样式文件。这个命令会在项目根目录下创建一个tailwind.config.js文件。在这个文件中，我们可以根据需要配置Tailwind CSS。
nuxt3项目使用swiper11插件实现点击‘’返回顶部按钮‘’返回到第一屏
Vinca@的博客
04-17 340
主要实现点击返回顶部按钮返回至swiper第一个slide。
nuxt.js切换路由滚动至页面顶部
leng0920的博客
08-19 1150
nuxt.js
router-link跳转回到页面顶部
m0_55336994的博客
09-04 733
router-link跳转回到页面顶部 router-link跳转到新页面只会停留在上一个页面的位置 在main.js中加入 router.afterEach((to, from, next) => { window.scrollTo(0, 0); }) 引用出处： https://blog.csdn.net/weixin_45536426/article/details/108360215 ...
nuxtjs开发的ssr网站，如何在后退时返回到上次滚动位置
ximenxiafeng的专栏
01-27 2652
nuxtjs开发的服务端渲染网站，默认刷新或者返回的时候，会自动滚动到顶部的位置； 要想去掉这个特性，我们可以修改编译好的_nuxt文件夹下的 router.scrollBehavior.js 文件 if ( // One of the children set `scrollToTop` Pages.some(Page => Page.options.scrollToTop) || // scrollToTop set in only page...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
最新发布
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
nuxt跳转不会回到顶部
05-20
在 Nuxt 中，可以使用 `nuxt-link` 或者 `this.$router.push` 进行路由跳转。在进行路由跳转时，可以使用 `scrollToTop` 选项来自动回到页面顶部。 使用 `nuxt-link`： ```html <nuxt-link to="/" :scroll-to-top="true">Home</nuxt-link> ``` 使用 `this.$router.push`： ```javascript this.$router.push({ path: '/', query: {}, scrollToTop: true }) ``` 如果你使用的是旧版本的 Nuxt（v1.x），则需要在 `nuxt.config.js` 中添加以下代码： ```javascript export default { router: { scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } else if (to.matched.some(m => m.meta.scrollToTop)) { return { x: 0, y: 0 } } else if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } } } ``` 然后在需要回到页面顶部的路由中添加 `scrollToTop: true`： ```javascript export default { meta: { scrollToTop: true } } ``` 希望以上内容能够帮助到你。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值