1、vue中使用vue-route切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法有時(shí)候我們需要頁面滾動(dòng)條滾動(dòng)到某一固定的位置，一般使用0方法。o語法就是：roooo0必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的坐標(biāo)。o必需。要在窗口文檔顯示區(qū)左上角顯示的文檔的坐標(biāo)。例如滾動(dòng)內(nèi)容的坐標(biāo)位置100,500window.scrollTo(100,500);好了，這個(gè)ro這丿L只是簡單介紹一下，下面我們介紹下veu-route中的滾動(dòng)行為。使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。vue-rout能做到，而且更好，它讓你可以自定義路由切換時(shí)頁面如何滾動(dòng)。注意這個(gè)

2、功能只在模式下可用。當(dāng)創(chuàng)建一個(gè)out實(shí)例，你可以提供一個(gè)ro方法：vorotroutereueouterrouteroevortoroveoto期望滾動(dòng)到哪個(gè)的位置roe方法接收ort和路由對象。第三個(gè)參數(shù)veo當(dāng)且僅當(dāng)o導(dǎo)航e通過瀏覽器的前進(jìn)后退按鈕觸發(fā))時(shí)才可用。這個(gè)方法返回滾動(dòng)位置的對象信息，長這樣：ueetoreruertroet只在u支持eruer：（offset：如果返回一個(gè)譯者注：不是:參考這里的值，或者是一個(gè)空對象,那么不會(huì)發(fā)生滾動(dòng)舉例：scrollBeh：vortoroveotoretur對于所有路由導(dǎo)航，簡單地讓頁面滾動(dòng)到頂部。返回veo,在按下后退前進(jìn)按鈕時(shí)，就會(huì)像瀏覽器

3、的原生表現(xiàn)那樣:roevortoroveotoveotoreturveotoeeretur如果你要模擬滾動(dòng)到錨點(diǎn)的行為：roevortoroveototoretureetorto我們還可以利用路由元信息更細(xì)顆粒度地控制滾動(dòng)。routes:path:/,component:Home,meta:scrollToTop:true,path:/foo,component:Foo,path:/bar,component:Bar,meta:scrollToTop:trueimportVuefromvueimportVueRouterfromvue-routerVue.use(VueRouter)const

4、Home=template:homeconstFoo=template:fooconstBar=template:barAnchor/scrollBehavior:/-onlyavailableinhtml5historymode/-defaultstonoscrollbehavior/-returnfalsetopreventscrollconstscrollBehavior=(to,from,savedPosition)=if(savedPosition)/savedPositionisonlyavailableforpopstatenavigations.returnsavedPosit

5、ionelseconstposition=/newnavigation./scrolltoanchorbyreturningtheselectorif(to.hash)position.selector=to.hash/checkifanymatchedrouteconfighasmetathatrequiresscrollingtotopif(to.matched.some(m=m.meta.scrollToTop)/cordswillbeusedifnoselectorisprovided,/oriftheselectordidntmatchanyelement.position.x=0p

6、osition.y=0/ifthereturnedpositionisfalsyoranemptyobject,/willretaincurrentscrollposition.returnpositionconstrouter=newVueRouter(mode:history,base:_dirname,scrollBehavior,routes:path:/,component:Home,meta:scrollToTop:true,path:/foo,component:Foo,path:/bar,component:Bar,meta:scrollToTop:true)newVue(router,template:ScrollBehavior/foo/bar/bar#anchor).$mount(#app)在網(wǎng)上查了一下，網(wǎng)友說還可以試試在main.js入口文件配合vue-router寫這個(gè)router.afterEach(to,from,next)=window.scrollTo(0,0);)