滾動行為

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

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

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

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

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

這個方法返回滾動位置的對象信息，長這樣：

如果返回一個布爾假的值，或者是一個空對象，那么不會發(fā)生滾動。

舉例：

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

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

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。