vue3 路由设置滚动条置顶

最新推荐文章于 2024-04-01 09:38:02 发布
最新推荐文章于 2024-04-01 09:38:02 发布
阅读量799 收藏
点赞数 1
分类专栏： vue 大前端 文章标签： vue router route
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35634154/article/details/122179174
版权

const router = createRouter({

  history: createWebHistory(),

  routes,

  // 跳转路由后导航栏置顶

  scrollBehavior(to, from, saveScrollPosition) {

    return { left: 0, top: 0 };

  },

});

开源字节
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3实现导航栏绑定内容锚点+滚动动画
qq_40184218的博客
06-16 3234
vue3实现导航栏绑定内容锚点+滚动
vue 组件的 scrollBehavior，定位滚动条的位置
aliven1的博客
11-17 1041
借助 vue-router 提供的 scrollBehavior，来管理组件滚动行为。
vue3实现吸顶和导航锚点联动
weixin_49684489的博客
09-22 1221
vue3实现吸顶和导航锚点联动
vue3 记录页面滚动条的位置，并在切换路由时存储或者取消
最新发布
lzfengquan的博客
04-01 560
需求，当页面内容超出了浏览器可是屏幕的高度时，页面会出现滚动条。当我们滚动到某个位置时，操作了其他事件或者跳转了路由，再次回来时，希望还在当时滚动的位置。那我们就进行一下操作。利用 @scroll=“handleScroll” 事件进行操, 定义的ref 获取dom。4.路由守卫 beforeRouteLeave路由离开前记录当前的位置。我这里获取的是元素本身的滚动条事件，可不是 window的滚动条事件。注意我们需要给元素的最外层父级元素设置。3.每次进入都要将存储的位置重新赋值给页面。
vue的路由滚动 切换路由之后滚动条在最上面
m0_64415782的博客
07-26 1196
如果你想自定义路由切换时的滚动行为，可以在路由配置中使用scrollBehavior函数。这个函数接收三个参数：to（目标路由对象），from（来源路由对象）和savedPosition（之前的滚动位置）。你可以根据这些参数来自定义滚动行为。在Vue中，你可以通过路由滚动行为来控制页面切换时滚动条的位置。默认情况下，Vue Router会将滚动条的位置重置为顶部。
Vue scrollBehavior 滚动行为
wushen的博客
04-29 512
转载原文 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 history 模式下可用。 当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： const router = new VueRouter(...
vue中改变滚动条样式的方法
10-15
在Vue.js应用中，改变滚动条的样式通常涉及到两种主要的方法：一种是使用原生CSS样式，另一种是借助第三方库，如vuescroll。这两种方法都有其特点和适用场景，下面将详细介绍这两种方法。 **一、原生CSS样式** ...
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
vue自定义浏览器滚动条(已兼容ie)
vue2.0路由切换后页面滚动位置不变BUG的解决方法
08-27
Vue 2.0 路由切换后页面滚动位置不变 BUG 的...Vue 2.0 路由切换后页面滚动位置不变 BUG 的解决方法是使用 watch 机制来监测路由的变化，然后将滚动距离设置为 0。这是一个简单而有效的解决方法，适用于 hash 模式下。
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
vue进入页面时滚动条始终在底部代码实例
10-17
`scrollTop`属性设置为`scrollHeight`，这会使滚动条滚动到底部。 对于滚动条的样式，我们可以使用CSS来自定义。例如： ```css ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track-...
Vue实战第3章：主页设计之顶部导航栏
孙君的空间站
02-01 9211
Vue实战第3章：主页设计之顶部导航栏
Vue3项目-配置路由及侧边栏导航栏
dayouan的博客
03-31 3873
2.在router文件夹下面index文件中 routes数组添加重定向 其中某对象中添加 children 属性 配置 二级路由 并关联上想要链接的页面 component 后面跟懒加载页面。-----------------------此时 通过手动输出地址就可以跳转地址 显示出路由出口的内容----------------------首先要提取头部组件到公共文件夹中 方便后期维护 然后引入到HomeView文件中 因为我写的vue3是以js为主的 因此 要删除掉类型注解。
黑马程序员前端 Vue3 小兔鲜电商项目——（六）二级分类页
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-23 870
黑马程序员前端 Vue3 小兔鲜电商项目——（六）二级分类页
vue设置导航栏、顶部栏为公共页面
FJ101113的博客
10-08 2130
首先全局引入需要的两个组件 import LeftSide from '@/components/leftSide/index'; import CrmHeader from '@/components/crmHeader/index'； Vue.component('LeftSide',LeftSide); Vue.component('CrmHeader',CrmHeader); 然后在MainApp.vue中添加如下代码 <!-- 实际运用场景中，登录注册页面我们不希望出现，所以用keep-a
Vue实现顶部导航栏设计
m0_52204142的博客
10-21 7281
效果图： 完整代码： <template> <div class="title"> <div class="title-left"> <div class="title-left-image"></div> <router-link to="/unusedOrder"> 　　 <span class="">导航一</spa
vue实现横向切换自动居中
Summer_JK的博客
12-02 1683
vue实现横向切换自动居中 想要点击的元素自动居中，首先要获取的值有：元素距离屏幕的左边距离，元素宽度的一半，屏幕的总宽度的一半，当前滚动的距离长度，下面是实现的代码： HTMl（这里的html是我项目所需要的数据渲染，大家可以理解成ul下多个li的结构）： <div class="flash-list"> <div class="scroll-box"> <div v-for="(item, _index) in flashLi
vue中的横向排列_vue.js 首页PC端横排导航栏
weixin_39954908的博客
12-19 1155
先看看效果 {{item.name}}{{subItems.name}}export default{data(){return{nowIndex:0,items:[{name:‘首页‘,isSubShow:false,subItems:[]},{name:‘精选路线‘,isSubShow:false,subItems:[{name:‘马尔代夫‘},{name:‘索马里海峡‘},{name:‘丽江...
Vue-cli3.0布局实战篇---组件
洋滔的博客
12-01 2214
在我们实际开发项目中，会有一些重复的代码块，比如单页应用的底部工具栏，页面的顶部导航栏，甚至一些特定应用里的推荐商品等等，如果我们每个页面都单独去写这些代码，一是影响开发效率二是不方便维护。而vue中的组件components，就可以解决这样的问题，通过组件的复用，来实现这些相同的页面效果。今天就给大家带来，在vue-cli3.0开发中，几种最常见的组件使用方法。
vue路由跳转滚动条置顶
09-01
在Vue中，当使用前端路由切换到新的路由时，默认情况下滚动条会被重置到页面顶部，不会保持原先的滚动位置。如果你想要在路由切换时将滚动条置顶，你可以通过自定义路由切换时的滚动行为来实现。在路由配置中，可以使用scrollBehavior函数来自定义滚动行为。scrollBehavior函数接收三个参数：to（目标路由对象）、from（来源路由对象）和savedPosition（之前的滚动位置）。你可以根据这些参数来自定义滚动行为。如果你想让滚动条在路由切换时置顶，你可以在scrollBehavior函数中返回{ x: 0, y: 0 }来将滚动条位置重置为页面顶部。这样，在每次路由切换时，页面都会滚动到顶部。这就是如何在Vue中实现路由跳转时将滚动条置顶的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue 切换路由页面时，滚动条滚动到最上面](https://blog.csdn.net/xingchen678/article/details/128723182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue的路由滚动 切换路由之后滚动条在最上面](https://blog.csdn.net/m0_64415782/article/details/131938991)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开源字节

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值