首页 > 其他分享 >Vue跳转路由后回到顶部

Vue跳转路由后回到顶部

时间:2022-11-19 18:33:57浏览次数:36  
标签:Vue 顶部 博客 回到 跳转 路由

在使用 Vue3 写个人博客时,点击一篇博客之后我想要跳转到文章详情界面,但是跳转后该页面位置还停留在上一个路由时的位置,而实际上是需要跳转后回到顶部。

解决方法为,为路由添加以下代码:

router.afterEach(() => {
  window.scrollTo(0, 0); // 切换路由之后滚动条始终在最顶部
});

标签:Vue,顶部,博客,回到,跳转,路由
From: https://www.cnblogs.com/liuyxcc/p/16906722.html

相关文章

  • vue-router参数传递
    通过query传递   使用$route获取query对象   ......
  • 2022-11-19 vue+uniapp之微信小程序 video initial-time 无效
    如题,原因:不详,个人推测是因为video没有初始化完成导致initial-time赋值不成功导致。解决方案:给video绑定一个变量,在设置初始化播放时间的时候为false,赋值后设置为true,即:<......
  • vue2 事件绑定1 $event 事件修饰符 .prevent .stop 按键修饰符
    $event:添加e,$event写法是固定的    二,事件修饰符e.prevetDefault()    事件修饰符优化后@click.revent="" ......
  • 路由的嵌套
    home路径下配置一个news和message子路径importVuefrom'vue'importVueRouterfrom'vue-router'constHome=()=>import('../components/Home')constHomeNews......
  • vue 样式穿透和scoped
    vue样式穿透style节点的scoped属性是为了防止组件之间的样式冲突,实现样式模块私有化,避免全局样式污染对于style上加了scope属性的组件,会主动加上data-v-xx的属......
  • 硬路由刷OpenWrt的网络拓扑
    硬路由看似有很多网口,但其实只有一张网卡(一个网口),所有的网口都是通过划分VLAN来实现不同的功能。如下图:硬路由有5个网口。其中Port0属于VLAN1,作为WAN口。Port1~Port4属......
  • 【Java】 Springboot+Vue 大文件断点续传
     同事在重构老系统的项目时用到了这种大文件上传 第一篇文章是简书的这个:https://www.jianshu.com/p/b59d7dee15a6 是夏大佬写的vue-uploader组件:https://www......
  • Windows下开发环境的搭建(前端vue后端java)
    0.下载或拷贝jdk(目前项目使用的版本包括1.6,1.7,1.8,11),配置Java环境变量:新建系统变量JAVA_HOME和CLASSPATH变量名:JAVA_HOME变量值:C:\ProgramFiles\Java\jdk1.7.0......
  • VUE模块划分
    bg-extend├──src│ ├──App.vue│ ├──api│ │ ├──tenant│ │ │ └──manager.js│ │ └──vote模块名-活动管理接......
  • vue多界面开发
    1.安装vue-cli,已有的请跳过这一步npminstall-g@vue/cli若已安装旧版vue-cli则需要先卸载vue-clinpmuninstall-gvue-cli2.创建项目vuecreateproject-n......