解决vue单页路由跳转后scrollTop的问题

作为vue的初级使用者，在开发过程中遇到的坑太多了。在看页面的时候发现了页面滚动的问题，当一个页面滚动了，点击页面上的路由调到下一个页面时，跳转后的页面也是滚动的，滚动条并不是在页面的顶部

在我们写路由的时候做个处理，如下:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: resolve => require(['../components/HelloWorld.vue'],resolve)}],scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { x: 0, y: 0 }}}
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。它的使用有很多种，可以试试。

以上这篇解决vue单页路由跳转后scrollTop的问题就是小熊分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小熊我,有问题也提出来

转载于:https://www.cnblogs.com/520BigBear/p/10042222.html

解决vue单页路由跳转后scrollTop的问题相关推荐

Vue导航点击路由跳转后样式不变
Vue导航点击路由跳转后样式不变 <template><ul><li :class="{active:isActive==1}" @click=&qu ...
解决 VUE 微信 IOS 路由跳转问题
解决 VUE 微信 IOS 路由跳转问题参考文章: (1)解决 VUE 微信 IOS 路由跳转问题 (2)https://www.cnblogs.com/taoquns/p/9713846.html ...
prerender html5,HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
VUE路由跳转后自动刷新一次页面
VUE路由跳转后自动刷新一次页面我们在前端开发时有时会遇到一些问题,暂时找不到解决办法只有靠刷新才能救一下.可是又不能每次都手动刷新.在网上找了很久的自动刷新办法,发现大部分都是路由跳转类的刷新,和 ...
vue二级路由跳转后外部引入js失效问题解决方案
vue二级路由跳转后外部引入js失效问题解决方案参考文章: (1)vue二级路由跳转后外部引入js失效问题解决方案 (2)https://www.cnblogs.com/LittleT/p/9077 ...
vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是 ...
前端单页路由《stateman》源码解析
<stateman>是波神的一个超级轻量的单页路由,拜读之后写写自己的小总结. stateman的github地址 github.com/leeluolee/s- 简单使用以下文章全部以 ...
简述vue单页应用与多页应用的区别
简述vue单页应用与多页应用的区别文章目录简述vue单页应用与多页应用的区别前言一.Vue单页应用是什么? 内部原理: 二.Vue多页应用是什么? 内部原理: 三.它俩有啥区别? 四.总结前 ...

解决vue单页路由跳转后scrollTop的问题

解决vue单页路由跳转后scrollTop的问题相关推荐

最新文章

热门文章