Pinia+Router学习笔记(十五)

简介: 本节记录Vue-Router中关于路由滚动行为的相关内容

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。
当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    console.log(to, '==============>', savePosition);
    // 支持异步
    return new Promise((r) => {
      setTimeout(() => {
        r({
          top: 10000
        })
      }, 2000);
    })
  },

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
scrollBehavior 返回滚动位置的对象信息,长这样:{ left: number, top: number }

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    return {
       top:200
    }
  },
相关文章
|
存储 移动开发 Linux
Linux系统之部署h5ai目录列表程序
【5月更文挑战第3天】Linux系统之部署h5ai目录列表程序
230 2
|
JavaScript 前端开发 API
尚硅谷Vue3 笔记总结及代码-1
尚硅谷Vue3 笔记总结及代码-1
488 0
|
存储 Linux 索引
【Linux】—— 详解软硬链接
【Linux】—— 详解软硬链接
224 0
|
SQL Java API
实时计算 Flink版操作报错之遇到org.codehaus.commons.compiler.CompileException 是什么导致的
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
|
安全 Java C++
CAS自旋锁到底是什么?为什么能实现线程安全?
本文是博主对多线程学习总结记录,希望对大家有所帮助。
1459 0
CAS自旋锁到底是什么?为什么能实现线程安全?
|
存储 机器学习/深度学习 人工智能
计算机的历史发展及原理
计算机的历史发展及原理
605 0
|
缓存 网络协议 算法
从0开始回顾计算机网络---系列三
传输层 1、TCP首部格式? 源端口: 占16比特,写入源端口号,用来标识发送该TCP报文段的应用进程。 目的端口: 占16比特,写入目的端口号,用来标识接收该TCP报文段的应用进程。 序号: 占32比特,取值范围[0,2^32-1],序号增加到最后一个后,下一个序号就又回到0。指出本TCP报文段数据载荷的第一个字节的序号。 确认号: 占32比特,取值范围[0,2^32-1],确认号增加到最后一个后,下一个确认号就又回到0。指出期望收到对方下一个TCP报文段的数据载荷的第一个字节的序号,同时也是对之前收到的所有数据的确认。若确认号=n,则表明到序号n-1为止的所有数据都已正确接收,期望接收序
|
设计模式 存储 算法
23个小案例带你吃透23种设计模式(二)
23个小案例带你吃透23种设计模式
351 0
23个小案例带你吃透23种设计模式(二)
|
计算机视觉
目标检测无痛涨点新方法 | DRKD蒸馏让ResNet18拥有ResNet50的精度(二)
目标检测无痛涨点新方法 | DRKD蒸馏让ResNet18拥有ResNet50的精度(二)
278 0
|
缓存 前端开发 JavaScript
React(四) ——hooks的使用
React(四) ——hooks的使用