滾動(dòng)行為

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁面如何滾動(dòng)。

注意: 這個(gè)功能只在 HTML5 history 模式下可用。

當(dāng)創(chuàng)建一個(gè) Router 實(shí)例，你可以提供一個(gè) scrollBehavior 方法：

var router = new VueRouter({  routes: [...],  scrollBehavior (to, from, savedPosition) {    // return 期望滾動(dòng)到哪個(gè)的位置  }})

scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。

這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長這樣：

• { x: number, y: number }
• { selector: string }

如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。

舉例：

scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}

對(duì)于所有路由導(dǎo)航，簡單地讓頁面滾動(dòng)到頂部。

返回 savedPosition，在按下 后退/前進(jìn) 按鈕時(shí)，就會(huì)像瀏覽器的原生表現(xiàn)那樣：

scrollBehavior (to, from, savedPosition) { if (savedPosition) {  return savedPosition } else {  return { x: 0, y: 0 } }}

如果你要模擬『滾動(dòng)到錨點(diǎn)』的行為：

scrollBehavior (to, from, savedPosition) { if (to.hash) {  return {   selector: to.hash  } }}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。