Vue Router滾動行爲 scrollBehavior

滾動行爲

使用前端路由，當切換到新路由時，想要頁面滾動到頂部或者是保持原先的滾動位置，就像從新加載頁面那樣。

vue-router能作到，並且更好，它讓你能夠自定義路由切換時頁面如何滾動。

注意：這個功能只在支持 history.pushState 的瀏覽器中可用。

當建立一個Router實例，你能夠提供一個scrollBehavior方法

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滾動到哪一個的位置
    // to:要進入的目標路由對象，到哪裏去ss
    console.log(to)
    // from:離開的路由對象，從哪兒來
    console.log(from)  
    // savedPosition: 會記錄滾動條的座標，點擊"後退/前進" 時的記錄值(x:?,y:?)
    console.log(savedPosition)  
  }
})

scrollBehavior方法接收 to 和 from 路由對象。第三個參數 savedPosition當且僅當 popstate 導航（經過瀏覽器的 前進/後退 按鈕觸發）時纔可用。

該方法返回滾動位置信息，以下所示：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

若是返回一個falsy值（falsy不是false，參考文檔），或者是一個空對象，那麼不會發生滾動。

舉例：

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

對於全部路由導航，簡單的讓頁面滾動到頂部。

返回 savePosition ，在按下 後退/前進 按鈕時，就會像瀏覽器的原生表現那樣：

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

若是你要模擬「滾動到錨點」的行爲：

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

還能夠利用路由元信息更細顆粒度的控制滾動。詳細例子請移步這裏。

異步滾動

2.8.0 新增

scrollBehavior (to,from,savedPosition) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({x:0,y:0})
        },500)
    })
}

將其掛在到從頁面級別的過渡組件的事件上，令其滾動行爲和頁面過渡行爲一塊兒良好運行是可能的。可是考慮到用例的多樣性和複雜性，咱們僅提供這個原始的藉口，以支持不一樣用戶場景的具體實現。

具體實現例子

const HomePage = () => import('@/page/homePage/HomePage-2.0'); /* 首頁 */

const ProductDetail = () => import('@/page/serviceProvider/ProductDetail'); /* 主要產品詳情 */

const scrollBehavior = (to, from, savedPosition) => {
    let returnData = {}
    if(savedPosition){
        returnData = savedPosition
    }
    else{
        returnData.x = 0
        returnData.y = 0
    }
    return returnData
}

export default new Router({
    mode: 'history',
    scrollBehavior,
    routes: [
        {
           path: '/',
           name: 'HomePage',
           component: HomePage, /* 首頁 */
           children: [
                {
                    path: '/ProductDetail',
                    name: 'ProductDetail',
                    component: ProductDetail, /* 產品詳情 */
                },
            ]
        }
    ]
})