### 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<RouteLocationNormalized & { href: string }>,
+ href: ComputedRef<string>,
+ isActive: ComputedRef<boolean>,
+ isExactActive: ComputedRef<boolean>,
+ navigate: (event?: MouseEvent) => Promise(NavigationFailure | void),
+}
+```
+
+#### Parameters
+
+| Parameter | Type | Description |
+| --------- | ----------------- | ------------------------------------------------------------------------------------- |
+| props | RouterLinkOptions | props object that can be passed to `<router-link>`. 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
#### 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:**
}
```
-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 `<router-view>`, 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'
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.
-<!-- TODO: fix links -->
-
-<!-- TODO: make it clear that this also works with other bundlers, not only with webpack -->
-
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
## 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 = () =>
## 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 => {
})
```
-`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
Some of new features to keep an eye on in Vue Router 4 include:
-<!-- TODO: links -->
-
-- Dynamic Routing
+- [Dynamic Routing](#TODO)
- [Composition API](/guide/advanced/composition-api.md)
-- Custom History implementation
+<!-- - Custom History implementation -->
## Breaking Changes: Improvements
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
### Removal of `event` and `tag` props in `<router-link>`
-Both `event`, and `tag` props have been removed from `<router-link>`. You can use the [`v-slot` API](#TODO) to fully customize `<router-link>`:
+Both `event`, and `tag` props have been removed from `<router-link>`. You can use the [`v-slot` API](/api/#router-link-s-v-slot) to fully customize `<router-link>`:
```html
replace
projects / thirdparty / vuejs / router.git / commitdiff
