Vue<路由跳转滚轮置顶方法>

都是在路由文件中修改

image.png

方法一：

推荐使用

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      name: 'home',
      path: '/',
      component: resolve => require(['@/components/mobile/Home'], resolve),
      meta: { title: '首页', keepAlive: true }
    }
  ],
  //每次路由跳转后滚轮置顶
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return {
      x: 0,
      y: 0
    }
  }
})
router.beforeEach((to, from, next) => {
  next()
})
export default router

方法二：

也可以实现效果，但是配合 keep-alive 使用时会有滚轮问题

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      name: 'home',
      path: '/',
      component: resolve => require(['@/components/mobile/Home'], resolve),
      meta: { title: '首页', keepAlive: true }
    }
  ]
})
router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)
  next()
})
export default router