From: Eduardo San Martin Morote Date: Fri, 17 Jun 2022 13:58:35 +0000 (+0200) Subject: docs: typed routes details for 4.1 X-Git-Tag: v4.1.0~10 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=411bc3de82822e835606b7a92e1f32561cb334d8;p=thirdparty%2Fvuejs%2Frouter.git docs: typed routes details for 4.1 --- diff --git a/packages/docs/guide/advanced/typed-routes.md b/packages/docs/guide/advanced/typed-routes.md index e71a93b0..3cdc80cf 100644 --- a/packages/docs/guide/advanced/typed-routes.md +++ b/packages/docs/guide/advanced/typed-routes.md @@ -1,8 +1,8 @@ # Typed Routes (v4.1.0+) -::: danger +::: danger ‼️ Experimental feature - ⚠️ 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 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. ::: @@ -53,6 +53,8 @@ Currently, typed routes are inferred at runtime with complex, costly types that 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. +Some APIs like `useRoute()` and `router.resolve()` are still not typed while this feature is being tested. + ## Troubleshooting 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). diff --git a/packages/playground/src/router.ts b/packages/playground/src/router.ts index 836edad6..4270b6a1 100644 --- a/packages/playground/src/router.ts +++ b/packages/playground/src/router.ts @@ -60,9 +60,8 @@ export const router = createRouter({ path: '/with-guard/:n', name: 'guarded', component, - beforeEnter(to, from, next) { - if (to.params.n !== 'valid') next(false) - next() + beforeEnter(to) { + if (to.params.n !== 'valid') return false }, }, { path: '/cant-leave', component: GuardedWithLeave }, @@ -182,19 +181,13 @@ export const router = createRouter({ }, }) -// router.push('/admin/dashboard') - declare module 'vue-router' { export interface Config { Router: typeof router } } -declare module 'vue' { - interface GlobalComponents { - RouterLink: RouterLinkTyped - } -} +// router.push({ name: 'user', params: {} }) const delay = (t: number) => new Promise(resolve => setTimeout(resolve, t)) diff --git a/packages/playground/src/views/Nested.vue b/packages/playground/src/views/Nested.vue index 514819b6..4a755be3 100644 --- a/packages/playground/src/views/Nested.vue +++ b/packages/playground/src/views/Nested.vue @@ -3,7 +3,7 @@

Nested level {{ level }}