From: Eduardo San Martin Morote Date: Wed, 9 Sep 2020 12:29:23 +0000 (+0200) Subject: docs(api): fix links X-Git-Tag: v4.0.0-beta.10~43 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7e08a669321c76ff5b2d272a44c59400fd17ba94;p=thirdparty%2Fvuejs%2Frouter.git docs(api): fix links --- diff --git a/docs/api/index.md b/docs/api/index.md index 531270ff..b06a823d 100644 --- a/docs/api/index.md +++ b/docs/api/index.md @@ -417,15 +417,45 @@ export declare function onBeforeRouteUpdate(updateGuard: NavigationGuard): void ### useLink -TODO: +Returns everything exposed by the [`v-slot` API](#router-link-s-v-slot). + +**Signature:** + +```typescript +export declare function useLink(props: RouterLinkOptions): { + route: ComputedRef, + href: ComputedRef, + isActive: ComputedRef, + isExactActive: ComputedRef, + navigate: (event?: MouseEvent) => Promise(NavigationFailure | void), +} +``` + +#### Parameters + +| Parameter | Type | Description | +| --------- | ----------------- | ------------------------------------------------------------------------------------- | +| props | RouterLinkOptions | props object that can be passed to ``. Accepts `Ref`s and `ComputedRef`s | ### useRoute -TODO: +Returns the current route location. Equivalent to using `$route` inside templates. + +**Signature:** + +```typescript +export declare function userRoute(): RouteLocationNormalized +``` ### useRouter -TODO: +Returns the [router](#Router) instance. Equivalent to using `$router` inside templates. + +**Signature:** + +```typescript +export declare function userRouter(): Router +``` ## TypeScript diff --git a/docs/api/vue-router-interface.md b/docs/api/vue-router-interface.md index 5ad439f4..9e8cd147 100644 --- a/docs/api/vue-router-interface.md +++ b/docs/api/vue-router-interface.md @@ -180,7 +180,7 @@ replace?: boolean; #### state -State to save using the History API. This cannot contain any reactive values and some primitives like Symbols are forbidden. More info at TODO: link mdn +State to save using the History API. This cannot contain any reactive values and some primitives like Symbols are forbidden. More info [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#Parameters). **Signature:** diff --git a/docs/guide/advanced/composition-api.md b/docs/guide/advanced/composition-api.md index 6d7637f2..9f5f198b 100644 --- a/docs/guide/advanced/composition-api.md +++ b/docs/guide/advanced/composition-api.md @@ -76,11 +76,11 @@ export default { } ``` -Composition API guards can also be used anywhere, they don't have to be used directly on the route component as in-component guards. +Composition API guards can also be used in any component rendered by ``, they don't have to be used directly on the route component like in-component guards. ## `useLink` -Vue Router exposes the internal behavior of RouterLink as a Composition API function. It gives access the same properties as the [`v-slot` API](#TODO): +Vue Router exposes the internal behavior of RouterLink as a Composition API function. It gives access the same properties as the [`v-slot` API](/api/#router-link-s-v-slot): ```js import { RouterLink, useLink } from 'vue-router' diff --git a/docs/guide/advanced/lazy-loading.md b/docs/guide/advanced/lazy-loading.md index 8dc88c12..71bf1677 100644 --- a/docs/guide/advanced/lazy-loading.md +++ b/docs/guide/advanced/lazy-loading.md @@ -2,10 +2,6 @@ When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunks, and only load them when the route is visited. - - - - Vue Router supports [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports) out of the box, meaning you can replace static imports with dynamic ones: ```js @@ -41,7 +37,7 @@ When using Babel, you will need to add the [syntax-dynamic-import](https://babel ## Grouping Components in the Same Chunk -Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting-async/#chunk-names) by providing a chunk name using a special comment syntax (requires webpack > 2.4): +Sometimes we may want to group all the components nested under the same route into the same async chunk. To achieve that we need to use [named chunks](https://webpack.js.org/guides/code-splitting/#dynamic-imports) by providing a chunk name using a special comment syntax (requires webpack > 2.4): ```js const UserDetails = () => diff --git a/docs/guide/advanced/navigation-guards.md b/docs/guide/advanced/navigation-guards.md index 0a978cfb..0ffae4cf 100644 --- a/docs/guide/advanced/navigation-guards.md +++ b/docs/guide/advanced/navigation-guards.md @@ -66,7 +66,7 @@ router.beforeEach((to, from, next) => { ## Global Resolve Guards -You can register a global guard with `router.beforeResolve`. This is similar to `router.beforeEach` because it triggers on **every navigation**, but resolve guards are called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**. Here is an example that ensures the user has given access to the Camera for routes that [have defined a custom meta](#TODO) property `requiresCamera`: +You can register a global guard with `router.beforeResolve`. This is similar to `router.beforeEach` because it triggers on **every navigation**, but resolve guards are called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**. Here is an example that ensures the user has given access to the Camera for routes that [have defined a custom meta](./meta.md) property `requiresCamera`: ```js router.beforeResolve(async to => { @@ -86,7 +86,7 @@ router.beforeResolve(async to => { }) ``` -`router.beforeResolve` is the ideal spot to fetch data or do any other operation that you want to avoid doing if the user cannot enter a page. It's also very easy to combine with [`meta` fields](./meta.md) to create a [generic fetching mechanism](/cookbook/generic-data-fetching.md) +`router.beforeResolve` is the ideal spot to fetch data or do any other operation that you want to avoid doing if the user cannot enter a page. It's also very easy to combine with [`meta` fields](./meta.md) to create a [generic fetching mechanism](#TODO) ## Global After Hooks diff --git a/docs/guide/migration/index.md b/docs/guide/migration/index.md index 66447201..f749a638 100644 --- a/docs/guide/migration/index.md +++ b/docs/guide/migration/index.md @@ -6,11 +6,9 @@ Most of Vue Router API has remained unchanged during its rewrite from v3 (for Vu Some of new features to keep an eye on in Vue Router 4 include: - - -- Dynamic Routing +- [Dynamic Routing](#TODO) - [Composition API](/guide/advanced/composition-api.md) -- Custom History implementation + ## Breaking Changes: Improvements @@ -89,13 +87,13 @@ Note this will work if `path` was `/parent/` as the relative location `home` to Decoded values are now consistent no matter where the navigation is initiated (older browsers will still produce unencoded `path` and `fullPath`). The initial navigation should yield the same results as in-app navigations. -Given any [normalized route location](#TODO): +Given any [normalized route location](/api/#routelocationnormalized): - Values in `path`, `fullPath` are not decoded anymore. They will appear as provided by the browser (modern browsers provide them encoded). e.g. directly writing on the address bar `https://example.com/hello world` will yield the encoded version: `https://example.com/hello%20world` and both `path` and `fullPath` will be `/hello%20world`. - `hash` is now decoded, that way it can be copied over: `router.push({ hash: $route.hash })`. - When using `push`, `resolve` and `replace` and providing a `string` location or a `path` property in an object, **it must be encoded**. On the other hand, `params`, `query` and `hash` must be provided in its unencoded version. -**Reason**: This allows to easily copy existing properties of a location when calling `router.push()` and `router.resolve()`. Learn more about encoding [in the cookbook](/cookbook/encoding.md). +**Reason**: This allows to easily copy existing properties of a location when calling `router.push()` and `router.resolve()`. Learn more about encoding [in the cookbook](#TODO). ## Breaking Changes: API Changes @@ -230,7 +228,7 @@ app.config.globalProperties.append = (path, pathToAppend) => ### Removal of `event` and `tag` props in `` -Both `event`, and `tag` props have been removed from ``. You can use the [`v-slot` API](#TODO) to fully customize ``: +Both `event`, and `tag` props have been removed from ``. You can use the [`v-slot` API](/api/#router-link-s-v-slot) to fully customize ``: ```html replace