小满Router(第十一章-滚动行为)

简介: scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

滚动行为


使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。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
    }
  },


目录
相关文章
|
7月前
第二十二章 案例TodoList之鼠标事件
第二十二章 案例TodoList之鼠标事件
|
4月前
|
前端开发 测试技术 开发者
React Router的神奇之处:如何用导航与路由管理让你的复杂SPA飞起来?
【8月更文挑战第31天】本文全面解析了React Router——一款用于React应用的路由与导航管理库。通过定义不同路径并依据URL渲染组件,React Router支持路径匹配、参数路由及嵌套路由等多种模式。文章详细介绍了其基本与高级用法,如使用`Link`组件导航、`Switch`组件进行路径匹配及`NavLink`自定义活动链接样式。此外,还探讨了懒加载、代码分割等性能优化技巧,并提供了简单示例代码,帮助读者快速上手。遵循本文最佳实践,开发者能够更高效地利用React Router构建复杂的单页面应用。
82 0
|
5月前
|
JavaScript
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
335 0
QGS
|
7月前
|
JavaScript 安全 前端开发
手摸手Element-ui路由VueRoute
手摸手Element-ui路由VueRoute
QGS
65 1
|
前端开发 JavaScript 网络架构
小满Router(第十二章-动态路由)
动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push() 或 router.replace() 来手动导航,才能显示该新路由
158 0
小满Router(第十二章-动态路由)
|
前端开发
【React工作记录五十】react中?.的使用
【React工作记录五十】react中?.的使用
71 0
|
API
小满Router(第十章-路由过渡动效)
想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot API:
75 0
|
JavaScript
小满Router(第三章-历史记录)
采用replace进行页面的跳转会同样也会创建渲染新的Vue组件,但是在history中其不会重复保存记录,而是替换原有的vue组件;
75 0
小满Router(第八章-导航守卫)
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:
76 0
小满Router(第二章-命名路由-编程式导航)
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
54 0