1. 程式人生 > >每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法

每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法

tps base 切換 pre info llb col 技術 scrolltop

1. 在main.js入口文件中寫入

//路由跳轉後,頁面回到頂部
router.afterEach(() => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

位置如下:

技術分享圖片

2. 還可以在實例router對象的時候設置

export default new Router({
      mode: ‘hash‘,
      // base: ‘/dist/‘,
      scrollBehavior: () => ({ y: 0 }), //路由跳轉後頁面回到頂部
      routes: []
})

參考鏈接:https://blog.csdn.net/csl125/article/details/83996314

每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法