竹白的 Vue 記事本 目錄
這個功能只在支持 history.pushState 的瀏覽器中可用。
1
2
3
4
5
6
|
const router = new VueRouter({
routes: [...],
scrollBehavior(to, from, savedPosition) {
// return {}
},
});
|
scrollBehavio 方法接收參數為：
to：即將要進入的目標路由物件。from：當前導航正要離開的路由物件。savedPosition：這個參數只有當 popstate 導航（透過瀏覽器的前進、後退按鈕觸發）時才可用。
這個方法需要回傳一個滾動位置物件，有兩種格式：
{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }}（offset 只在 2.6.0+ 支持）
如果回傳一個 falsy 值或空物件，則不會發生滾動。
對於所有路由導航，簡單地讓頁面滾動到頂部：
1
2
3
|
scrollBehavior(to, from, savedPosition) {
return { x: 0, y: 0};
}
|
若是透過瀏覽器的前進、後退按鈕切換路由時，可以使用 savedPosition 取得上次位置：
1
2
3
4
5
6
7
|
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0};
}
}
|
若希望路由切換時，讓頁面滾動到指定位置，可以利用 hash，模擬「滾動到錨點」的行為：
<router-link :to="{name: 'nav', hash: '#nav'}">nav</router-link>
1
2
3
4
5
|
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { selector: to.hash };
}
}
|
若是希望滾動位置可以預留空間，可以加上 offset 屬性：
1
2
3
4
5
6
7
8
|
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash,
offset: { x: 0, y: 100 },
};
}
}
|
非同步滾動
2.8.0 新增了非同步滾動，可以回傳一個 Promise 來處理
1
2
3
4
5
6
7
|
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 });
}, 500);
});
},
|
