轻松掌握 vue-router scrollBehavior，告别滚动难题！

使用前端路由时，当切换到新路由，你是否希望页面滚到顶部，或者保持原先的滚动位置，就像重新加载页面那样？vue-router 中的 scrollBehavior 方法可以轻松实现此功能。

vue-router scrollBehavior 使用指南

1. 安装 vue-router

npm install vue-router

2. 创建 Router 实例

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

3. 使用 scrollBehavior 方法

router.scrollBehavior = (to, from, savedPosition) => {
  // 当切换到新路由时，页面滚到顶部
  if (to.path !== from.path) {
    return { x: 0, y: 0 }
  }

  // 保持原先的滚动位置
  if (savedPosition) {
    return savedPosition
  }

  // 默认情况下，页面滚到顶部
  return { x: 0, y: 0 }
}

vue-router scrollBehavior 使用无效的解决方案

如果你在使用 scrollBehavior 方法时遇到问题，可以尝试以下解决方案：

1. 确保在创建 Router 实例时使用了 scrollBehavior 方法

const router = new VueRouter({
  routes,
  scrollBehavior
})

2. 确保 scrollBehavior 方法返回一个对象

router.scrollBehavior = () => {
  return { x: 0, y: 0 }
}

3. 确保 scrollBehavior 方法中的对象具有 x 和 y 属性

router.scrollBehavior = () => {
  return {
    x: 0,
    y: 0
  }
}

4. 确保 scrollBehavior 方法中的 x 和 y 属性都是数字

router.scrollBehavior = () => {
  return {
    x: 0,
    y: 0
  }
}

5. 确保 scrollBehavior 方法中的 x 和 y 属性都是非负整数

router.scrollBehavior = () => {
  return {
    x: 0,
    y: 0
  }
}

6. 确保 scrollBehavior 方法中的 x 和 y 属性都是小于或等于页面滚动高度的整数

router.scrollBehavior = () => {
  return {
    x: 0,
    y: 0
  }
}