您现在的位置是：首页 > 前端开发 Vue 路由跳转后不在顶部

Vue 路由跳转后不在顶部

2020-09-03 【前端开发】 453人已围观 564次浏览

简介Vue 路由跳转后不在顶部

Vue 项目中，在很长的页面中，使用下面代码

this.$router.push('/post/1')

进行路由跳转时，就会出现滚动条还是在当前位置，跳转的目标页并没有在顶部的问题，这样会对于很多长页面来说，是很困扰的

比较简单的解决方法就就是在 Vue 项目的 main.js 中添加下面的代码

// 处理页面跳转后不在顶部问题
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})

具体位置可以是在 new Vue({ 之前即可，放在文件最后可能会出现不生效的问题

保存之后，再点击跳转，就会默认跳转目标页顶部

很赞哦！ (0)