Vue.js 在 setTimeout 后滚动到新页面路由的顶部

2023-12-21

当立即滚动到新路线的顶部时,我的页面转换效果不佳。我想等待 100 毫秒,然后它会自动滚动到顶部。以下代码根本不会滚动。有没有办法做到这一点?

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        setTimeout(() => {
            return { x: 0, y: 0 }
        }, 100);
    }
})

这是原生支持的Vue现在,使用scrollBehaviour, 像这样:

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ],
  mode: 'history'
});

更多这里 https://router.vuejs.org/guide/advanced/scroll-behavior.html.

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

Vue.js 在 setTimeout 后滚动到新页面路由的顶部 的相关文章

  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页
  • VueJS - 验证表单文件上传中的文件大小要求

    我正在使用 Bootstrap Vue 表单制作一个简单的表单 用户可以在其中上传文件 有没有办法验证使用 Vue 表单选择的文件的大小 我想阻止用户上传此类文件 我见过this https stackoverflow com questi
  • 使用 Javascript 在前端创建基本 URL(开发、API 和生产)

    无论开发和部署如何 如何制作适用于 http https localhost 端口和实际域的基本 url 我想创建一个可以在所有场景或条件下工作的基本 url 无论 http https 协议 端口 本地主机和实际域如何 无论是在开发中还是
  • Laravel Echo 不监听推送事件

    尝试使用 laravel 和 vuejs 创建一种聊天应用程序 发送消息后 我会从 laravel 触发事件 该事件会使用正确的事件类反映在推送器调试控制台上 但根本不会调用来自 vuejs 的监听回调 created window Ech
  • 如何在Vue中获取输入字段值

    我是 Vue 新手 我需要一些帮助来从输入字段获取值 在我的表格中 我有
  • Vue 3:使用渲染函数将所有项目包装在一个自定义组件中

    我正在尝试建立自己的sortable成分 我想将项目列表传递到它的默认插槽 然后 可排序组件应该用自定义包装所有传递的项目v draggable成分
  • 从 Vue CLI 切换到使用 Spring-Boot 作为后端的 Vite,开发服务器未按预期工作

    有多种方法可以将 Vue 项目集成到 Spring Boot 项目中 使用基于 webpack 的构建工具 例如 vue cli 我已经通过以下方式成功完成了几次 配置outputDir构建过程的输出被放置在例如 static dist 最
  • Vue.js 更改 {{ }} 标签

    我想改变 something by 在 Vue js 中 我怎样才能实现这一点 这可能吗 我在 AngularJS 中寻找的等效项 var app angular module app function interpolateProvide
  • 无法使用Vue获取灵活元素的CSS属性值

    我正在尝试获取 CSSwidth灵活元素的属性 但由于某种原因它不起作用 代码笔 https codepen io anon pen pLEwdp editors 1010 https codepen io anon pen pLEwdp
  • Nuxt.js 多个资源的根路由和根级 slugs

    我正在使用 Nuxt 构建一个电子商务前端 我希望为尽可能多的资源提供根级 slugs 最重要的是目录路径和产品 URL 一个明显的方法是使用 Nuxt 文件结构进行路由创建 com category men Tshirt com cate
  • 有没有V型斗篷的反面?

    根据VueJS 文档 https v2 vuejs org v2 api v cloak v cloak 指令可用于隐藏未编译的 Mustache 绑定 直到 Vue 实例准备就绪 换句话说 我可以隐藏一个div或类似的东西 当 vue 准
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • Laravel Vue 组件只能传递数字?

    在我的 UserMenu vue 中我写道 export default props nameVal data return 并在blade php中
  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 通知用户消息仍在输入中

    我正在使用 Laravel 5 6 7 Socket IO 和 vue js 我没有使用 Pusher 和 redis 下面是我的代码 用于向与我一对一聊天的用户发送消息 var url http localhost 6001 apps M
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好

随机推荐

  • Javascript 在一定时间后关闭弹出窗口

    嗨 首先我不懂 JavaScript 因此 我的主页上有一个弹出窗口 其中包含对客户的圣诞祝福 我希望弹出窗口在 20 秒后关闭 我从互联网上获得了以下代码 弹出窗口可以正常打开 但我需要以下方面的帮助 我在哪里输入弹出窗口的时间限制和 我
  • CRONTAB 语法错误

    这是我的 CRONTAB 文件 Ubuntu 10 10 57 1 2 6 ET date date yesterday Y m d echo ET 甚至语法颜色也表明有问题 并且有这个错误 Subject Cron
  • VS Code 有没有办法缩进到左括号?

    我希望修改 VS Code 的缩进行为 这样如果我在输入如下行后按 Enter 键 variable function param1 它将缩进到左括号的水平 以便我可以轻松地格式化代码 如下所示 variable function para
  • 如何在 Aurelia 中设置复选框绑定

    我有一个复选框列表 当用户选中其中一个复选框时 会在 js 文件中调用一个函数 然后调用一个方法 dataservice js 来调用 webapi 控制器 这一切都工作正常并返回正确的数据 当该过程完成时 会发生的情况是触发序列的复选框未
  • 存储指向 std::string 数据的指针是否安全?

    我的问题围绕复制构造和重新分配的机制 我有一堂课 收集字符串 将字符串添加到集合后 该字符串将被复制并存储在向量中 但因为我还需要访问所有字符串的集合const char const 我还通过以下方式存储指向每个字符串数据的指针 c str
  • sbt - 仅在发布期间排除某些依赖项

    我正在构建一个实用程序库 可以与 Apache Spark 1 0 1 1 1 2 版本之一一起使用 由于它们都是二进制向后兼容的 我想让用户决定使用哪个 Spark 版本 通过手动添加spark core将首选版本作为我的库的依赖项 并且
  • MATLAB 是否执行公共子表达式消除?

    MATLAB 的优化器是否对 MATLAB 代码执行公共子表达式消除 例如 if max val gt minVal max val lt maxVal maxVal max val end 多久一次max val 在那里评价 将中间值存储
  • AppFabric 安装错误代码 1603

    我意识到这个问题已经被问到 但迄今为止发布的所有解决方案尚未取得巨大成功 这是 3 个日志中的 2 个 我很可能在这里遗漏了一些东西 但非常感谢您的帮助 应用服务器设置 2013 05 20 18 14 31 Information Set
  • 如何使用计时器运行 php 脚本?

    我有 foreach 函数来打印学生姓名 names array Alex Brad Tom foreach names as name echo name br sleep 3 我如何打印每个名字 每 3 秒一次 后 echo name
  • 如何使用 bash 脚本安装包含变量的 bash 函数? [复制]

    这个问题在这里已经有答案了 我正在尝试创建一个 bash 脚本 该脚本允许我在多台计算机上安装相同的 bash 函数 此特定函数在备份目录中创建带有时间戳的文件副本 filebackup cp filebackup date Y m d H
  • ASP.NET MVC3 WebGrid 帮助程序和模型元数据

    我正在尝试使用 ASP NET MVC 3 中的 WebGrid html 帮助程序根据 ModelMetadata 中找到的信息自动生成列 例如 接受对象列表的视图中的代码将是 var grid new WebGrid Model gri
  • 两个列表的交集,在第一个列表中保留重复项

    我有两个平面列表 其中之一包含重复值 例如 array1 1 4 4 7 10 10 10 15 16 17 18 20 array2 4 6 7 8 9 10 我需要在 array1 中查找也在 array2 中的值 将重复项保留在 ar
  • 在 ActionScript 3 中将一系列函数“链接”在一起

    我正在调用一个函数 并在该函数返回一些数据时添加一个侦听器 当数据返回时我需要调用另一个函数等等 是否有一种简单的方法将这些函数 链接 在一起 以便第一个函数触发 等待侦听器 然后触发第二个函数 为其创建侦听器 依此类推 直到最后一个函数调
  • SSRS 传递报告参数

    我度过了艰难的一天 试图解决这个问题的根本问题 我有一个用户输入信息的表单 该信息通过 URL 传递到 SSRS 我收到错误 An error has occurred during report processing rsProcessi
  • UITextField 中的 UITextPosition

    有什么方法可以让我通过文本字段的 UITextRange 对象获取 UITextField 当前的插入符位置吗 UITextField 返回的 UITextRange 有什么用吗 UITextPosition 的公共接口没有任何可见成员 昨
  • 基于 Restful 的视频流

    使用 spring boot 我想制作基于 RESTful 的视频播放器 我的文件浏览器中有 mp4 扩展名的视频 如何通过创建休息端点在前端提供这些视频 我已经尝试过这个方法 http shazsterblog blogspot com
  • 如何在 Three.js 中更改脸部颜色

    我正在尝试更改网格单个面上的颜色 这是在 WebGL 上下文中 我可以改变整个网格的颜色 但不能改变单个面的颜色 相关代码如下 Updated Per Lee var camera this camera var projector new
  • 如何编写语法类似Python缩进的语言?

    我正在使用类似于 Python 的内置语言编写一个工具 我想让缩进在语法中有意义 以便行开头的制表符和空格代表命令的嵌套 做这个的最好方式是什么 我之前写过递归下降和有限自动机解析器 目前的CPython http en wikipedia
  • 仅对最近修改的文件运行 grunt-contrib-jshint

    我们正在一个非常大的网站上重构代码 我想对任何发生更改的文件强制执行 linting 但忽略其余文件 因为其中许多文件最终会被删除 所以整理它们是浪费时间 我想要一个 grunt 任务来检查文件的修改日期是否比其创建 从存储库获取 日期更新
  • Vue.js 在 setTimeout 后滚动到新页面路由的顶部

    当立即滚动到新路线的顶部时 我的页面转换效果不佳 我想等待 100 毫秒 然后它会自动滚动到顶部 以下代码根本不会滚动 有没有办法做到这一点 export default new Router mode history routes pat