Skip to content

Commit 4e99c26

Browse files
committed
docs: update typed routes
1 parent 90900c1 commit 4e99c26

File tree

1 file changed

+3
-55
lines changed

1 file changed

+3
-55
lines changed

packages/docs/guide/advanced/typed-routes.md

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,7 @@
22

33
::: danger ‼️ Experimental feature
44

5-
This feature is still experimental and will evolve in the future, make sure to follow along in release notes and check the [Troubleshooting](#troubleshooting) section if you have issues. This feature is very likely to be replaced by a much more efficient build-based implementation. It not recommended for projects with a lot of routes (+50) but the setup takes about a minute and can be reverted in a few seconds at any time.
5+
Starting from v4.1.0, we are introducing a new feature called Typed Routes. This **experimental** feature is enabled through a Vite/webpack/rollup plugin.
66

7-
:::
8-
9-
With typed routes you get type validation when calling `router.push()` as well as autocompletion for the route path. It gives you:
10-
11-
- Validation for [named routes](../essentials/named-routes.md) `name` and `params` properties
12-
- Autocompletion of the `to` prop when using the `<RouterLink>` component
13-
14-
## Usage
15-
16-
In order to benefit from typed routes, it is necessary to pass the `routes` option to the `as const`:
17-
18-
```ts{6}
19-
const router = createRouter({
20-
// ...
21-
routes: [
22-
{ path: '/', name: 'home' },
23-
{ path: '/users/:id', name: 'user' },
24-
] as const, // <-- this is the important part
25-
})
26-
```
27-
28-
This will give you a **typed router instance**. Go ahead and give it a try, start typing `router.push({ name: '|'}` and hit `ctrl` + `space` to autocomplete the route name. It will also autocomplete `params` if they exist and **give you a type error** if the name doesn't exist or if the provided params are missing any required params. Note that you can push a route **with no `params` property** and this will be considered valid for the types because `params` are always kept from the current route whenever possible.
29-
30-
### Typed `router` instance
31-
32-
It is possible to type `$router` and `useRouter()` to be the same type as the `router` instance we created above. To do this, we need to extend an interface. It's recommended to do so in the `router.ts` file, right after creating the router:
33-
34-
```ts{5-9}
35-
export const router = createRouter({
36-
// ...options
37-
})
38-
39-
declare module 'vue-router' {
40-
interface Config {
41-
Router: typeof router
42-
}
43-
}
44-
```
45-
46-
### Typed `<RouterLink>`
47-
48-
Providing the router instance to the `Config` interface above, will also provide typings to the `<RouterLink>` component's `to` prop.
49-
50-
## Caveats
51-
52-
Currently, typed routes are inferred at runtime with complex, costly types that become slow if you have a lot of routes. If you have more than 50 routes, you will should give this a try first to see how much it impacts the compilation time of your project.
53-
54-
If you have [dynamic routes](../advanced/dynamic-routing.md), these cannot be typed and if you use [named routes](../essentials/named-routes.md), you won't be able to push to them so it's better not to use both at the same time.
55-
56-
Some APIs like `useRoute()` and `router.resolve()` are still not typed while this feature is being tested.
57-
58-
## Troubleshooting
59-
60-
If you ever find something blocking you or making your types too slow, you can just remove the `as const` part to rollback to the previous version of the types. If something not mentioned here isn't working and you think it should be working, please open an issue on [GitHub](https://github.com/vuejs/router/issues).
7+
[Check the v4.1 release notes](https://github.com/vuejs/router/releases/tag/v4.1.0) for more information about this feature.
8+
[Check out the plugin](https://github.com/posva/unplugin-vue-router) GitHub repository for installation instructions and documentation.

0 commit comments

Comments
 (0)