在使用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