作为 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 导航 (通过浏览器的 前进 / 后退 按钮触发) 时才可用. 它的使用有很多种, 可以试试.
来源: http://www.bubuko.com/infodetail-2866662.html