Skip to content

Commit f0871d1

Browse files
committed
update docs/types for new features
1 parent effb114 commit f0871d1

File tree

6 files changed

+40
-6
lines changed

6 files changed

+40
-6
lines changed

Diff for: docs/en/advanced/scroll-behavior.md

+19-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. `vue-router` allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation.
44

5-
**Note: this feature only works in HTML5 history mode.**
5+
**Note: this feature only works if the browser supports `history.pushState`.**
66

77
When creating the router instance, you can provide the `scrollBehavior` function:
88

@@ -60,3 +60,21 @@ scrollBehavior (to, from, savedPosition) {
6060
```
6161

6262
We can also use [route meta fields](meta.md) to implement fine-grained scroll behavior control. Check out a full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js).
63+
64+
### Async Scrolling
65+
66+
> New in 2.8.0
67+
68+
You can also return a Promise that resolves to the desired position descriptor:
69+
70+
``` js
71+
scrollBehavior (to, from, savedPosition) {
72+
return new Promise((resolve, reject) => {
73+
setTimeout(() => {
74+
resolve({ x: 0, y: 0 })
75+
}, 500)
76+
})
77+
}
78+
```
79+
80+
It's possible to hook this up with events from a page-level transition component to make the scroll behavior play nicely with your page transitions, but due to the possible variance and complexity in use cases, we simply provide this primitive to enable specific userland implementations.

Diff for: docs/en/api/options.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,16 @@
7474
Signature:
7575

7676
```
77-
(
77+
type PositionDescriptor =
78+
{ x: number, y: number } |
79+
{ selector: string } |
80+
?{}
81+
82+
type scrollBehaviorHandler = (
7883
to: Route,
7984
from: Route,
8085
savedPosition?: { x: number, y: number }
81-
) => { x: number, y: number } | { selector: string } | ?{}
86+
) => PositionDescriptor | Promise<PositionDescriptor>
8287
```
8388

8489
For more details see [Scroll Behavior](../advanced/scroll-behavior.md).

Diff for: flow/declarations.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ declare type NavigationGuard = (
2828
declare type AfterNavigationHook = (to: Route, from: Route) => any
2929

3030
type Position = { x: number, y: number };
31+
type PositionResult = Position | { selector: string, offset?: Position } | void;
3132

3233
declare type RouterOptions = {
3334
routes?: Array<RouteConfig>;
@@ -41,7 +42,7 @@ declare type RouterOptions = {
4142
to: Route,
4243
from: Route,
4344
savedPosition: ?Position
44-
) => Position | { selector: string, offset?: Position } | ?{};
45+
) => PositionResult | Promise<PositionResult>;
4546
}
4647

4748
declare type RedirectOption = RawLocation | ((to: Route) => RawLocation)

Diff for: src/util/scroll.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ export function handleScroll (
4747

4848
if (typeof shouldScroll.then === 'function') {
4949
shouldScroll.then(shouldScroll => {
50-
scrollToPosition(shouldScroll, position)
50+
scrollToPosition((shouldScroll: any), position)
51+
}).catch(err => {
52+
if (process.env.NODE_ENV !== 'production') {
53+
assert(false, err.toString())
54+
}
5155
})
5256
} else {
5357
scrollToPosition(shouldScroll, position)

Diff for: types/router.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ declare class VueRouter {
4545
}
4646

4747
type Position = { x: number, y: number };
48+
type PositionResult = Position | { selector: string, offset?: Position } | void;
4849

4950
export interface RouterOptions {
5051
routes?: RouteConfig[];
@@ -59,7 +60,7 @@ export interface RouterOptions {
5960
to: Route,
6061
from: Route,
6162
savedPosition: Position | void
62-
) => Position | { selector: string, offset?: Position } | void;
63+
) => PositionResult | Promise<PositionResult>;
6364
}
6465

6566
type RoutePropsFunction = (route: Route) => Object;

Diff for: types/test/index.ts

+5
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,11 @@ const router = new VueRouter({
6060
if (savedPosition) {
6161
return savedPosition;
6262
}
63+
64+
return Promise.resolve({
65+
x: 0,
66+
y: 0
67+
})
6368
},
6469
routes: [
6570
{ path: "/", name: "home", component: Home, children: [

0 commit comments

Comments
 (0)