vue-router scrollBehavior無效的問題

 

 

  在使用vue作單頁面應用開發時候 使用vue-router做爲路由控制器  在使用過程當中發現每一個頁面打開都在原來的位置 不能返回到頁面頂部位置 ,而後查看api文檔html

  滾動行爲  發現以下代碼:vue

  

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滾動到哪一個的位置
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
           return savedPosition
      } else {
      return { x: 0, y: 0 }
   }
 }
  }
})    

  添加路由中後發現沒有實際效果。。。vue-router

  

  再細查資料發現做者在issues中說了api

  Hooking into transitions involves too many intricacies and depends on custom transition implementations, so vue-router is not going to support that as a built-in. It's possible to implement your own transition component for that purpose though.ui

  意思是vue-router不在支持這個特性了spa

 

 

  解決方式:  code

router.beforeEach((to, from, next) => {
document.body.scrollTop = 0;
next()
});

 

  在路由遍歷中使用js代碼進行滾動條的頂部返回component

相關文章
相關標籤/搜索