Vue Router 转到新页面顶部

2024-02-11

现在,在我的 Vue 应用程序中,当我单击<router-link>,它会转到该页面,但滚动级别与上一页相同(因为链接只是替换了组件)。

我想知道是否有一个vue-router使页面转到顶部的功能,或者我需要使用其他一些 JS 编程来实现此目的。

非常感谢您的帮助。


Vue 路由器有几个守卫和函数,在路由更改之前、期间和之后调用。在您的情况下,有一个专用函数可以让您覆盖滚动的默认行为,名为scrollBehavior https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling。它被称为有两个路由对象 https://router.vuejs.org/api/#the-route-object和一个包含 x 和 y 坐标的对象,可能还有一个选择器,用于选择页面上的元素用作偏移量。

要使用它,请更改定义路由器的代码并添加scrollBehavior功能:

// src/router.js
const router = new VueRouter({
  // What you previously had here, such as routes

  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 };
  }
});

export default router;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue Router 转到新页面顶部 的相关文章

  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何将vue组件插入到contenteditable div中

    我想用 vue 创建简单的所见即所得编辑器 我发现只有一个在 vue js 上创建的真正的所见即所得编辑器 这里是 https quasar dev vue components editor 但我没有发现有插入图像的能力 其他 vue w
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • 将文件移动到另一个目录的批处理文件

    我希望你能帮我解决这个问题 它可能已经被问过多次 我知道 但由于某种原因 我就是无法让它工作 我想将一些文件从 files 目录移动到根目录 例如 这些文件是 test1 txt test2 txt test3 zip test4 zip
  • JAXB 删除 XmlRootElement 包装器

    我有这个 XmlRootElement 类 Person XmlRootElement class Person private String desc 返回内容为 Person desc abc 我真的不想要根包装器 所以我希望内容看起来
  • 从远程计算机访问 TEAMCITY

    我在从远程计算机浏览我的团队城市 JetBrains 时遇到问题 我已按照安装说明进行操作 安装很顺利 我可以在服务器上本地浏览应用程序 没有任何问题 我将配置文件中的默认服务器 URL 更改为http 我的 http my服务器名称 我可
  • MatDatepickerFilter - 过滤器函数无法访问类变量

    一个 MatDatePicker 其过滤器定义如下
  • Clang 项目的 AST

    我使用 Clang python 绑定来提取 c c 文件的 AST 它非常适合我编写的一个简单程序 问题是当我想将它用于像 openssl 这样的大项目时 我可以为项目的任何单个文件运行 clang 但 clang 似乎错过了项目的一些标
  • 为什么 ARM mac 上的 hello world 汇编“无效”?

    其他答案没有告诉我如何编译 我被困住了 我在汇编中有一个简单的 hello world global start align 2 start mov X0 1 adr X1 hello mov X2 13 mov X16 4 svc 0 m
  • 什么时候禁用视图状态是安全的?

    什么时候禁用视图状态是安全的 用于哪些控件 什么情况下 在用户控件中 我禁用了视图状态 但是如果我尝试单击此控件
  • 无法在 PHPMyAdmin 中选择 Latin-1 作为字符集

    我正在尝试按照教程进行操作 在教程中 讲师演示了如何编辑config inc文件将文件夹设置为 UploadDir 这使他能够选择 SQL在 phpmyadmin 中导入时 从 Web 服务器上传目录 下拉菜单中导入该文件夹中的文件 我尝试
  • Spring Data JPA 太慢

    我最近将我的应用程序切换到 Spring Boot 2 我依靠 Spring Data JPA 来处理所有事务 我注意到这与我的旧配置之间存在巨大的速度差异 存储大约 1000 个元素在大约 6 秒内完成 现在需要超过 25 秒 我看过有关
  • Powershell - 使用“拍摄日期”属性重命名文件

    我的三星手机上有一堆图像和视频 我将这些图像复制到 USB 然后复制到我的电脑上 我想使用 Powershell 根据这些文件的 拍摄日期 属性重命名这些文件 格式要求 yyyy MM dd HH mm ss ddd 我一直在使用 Powe
  • Paypal Checkout - 不询问非会员的送货地址吗?

    我刚刚开始使用这个模块 https github com paypal paypal checkout https github com paypal paypal checkout 我正在尝试找出如何关闭客户的送货地址 我知道你可以做的订
  • Rails 如何在未找到记录时重定向

    如果找不到记录 我正在尝试重定向 该页面未重定向 并且出现未找到错误记录 我的控制器 def index link Link find params id respond to do format if link blank format
  • 自动上传新创建的文件到SFTP服务器

    ASP NET 应用程序 在 Windows 服务器 IIS 7 上运行 必须将当前用户上传的大文件传输到外部 SFTP 服务器 由于文件大小 我们的想法是异步执行此操作 这个想法是 ASP NET 应用程序将上传的文件存储在 Window
  • 如何从 Gtk ScrolledWindow 中删除框架(或边框?)

    如何删除 Gtk ScrolledWindow gtk 的框架 或边框 如果是 用于window ShadowType ShadowType None 不工作 window BorderWidth 0 不工作 感谢帮助 Set the Fo
  • 是否可以将 .coffee 脚本文件加载到浏览器并执行?

    我正在尝试将咖啡脚本与 Coffee script js 文件一起加载到 Sample coffee 文件中 并对 HTML 执行一些简单的操作 但我无法加载sample coffee 文件
  • 如何在Python中使用ftplib上传二进制文件?

    我的 python2 脚本使用这种方法很好地上传文件 但 python3 出现了问题 我不知道下一步该去哪里 谷歌搜索没有帮助 from ftplib import FTP ftp FTP ftp host ftp user ftp pas
  • Tableau Javascript API HTTPS 不起作用

    我正在尝试将报告嵌入到我的网站上 但出现以下错误 混合内容 页面位于 https mywebsite com blah blah https mywebsite com blah blah 通过 HTTPS 加载 但请求了不安全的资源 ht
  • python 3.3 和 3.3m 有什么区别[重复]

    这个问题在这里已经有答案了 python 3 3 和 3 3m 有什么区别 我正在使用 Ubuntu 13 04 Raring 在我的系统上我有 python2 7 和 python3 3 我知道 2 和 3 之间的区别 但我还安装了 py
  • 抖动问题:RenderFlex 右侧溢出 248 像素

    我在一列中使用了三个文本 其中一个文本很长 然后我收到此错误 RenderFlex 右侧溢出了 248 像素 我在一列中使用了三个文本 其中一个文本字段很长 然后我收到此错误 RenderFlex 右侧溢出了 248 像素 如何修复它 Th
  • Vue Router 转到新页面顶部

    现在 在我的 Vue 应用程序中 当我单击