vue2 切换路由时页面滚动到顶部用游览器返回时记住上页的位置

最新推荐文章于 2024-08-12 11:34:27 发布

转载最新推荐文章于 2024-08-12 11:34:27 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cynthia-wuqian/p/7381505.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue.js中的路由模块实现页面滚动行为的自定义设置。通过代码配置Vue-router的scrollBehavior选项，可以实现页面加载时滚动条自动回到顶部或是记录并返回用户的浏览位置等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方用例：https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index.vue'

Vue.use(Router)

const router = new Router({
  mode: 'history',//这种方法只能在history模式下使用
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition  //游览器返回记住位置
    } else {
      return { x: 0, y: 0 } //滚动到顶
    }
  }
})
export default router