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 后滚动到新页面路由的顶部 的相关文章

随机推荐

  • 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