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 e71a93b092d6cce3a4685ee7788291e7ef87eb6d..3cdc80cffd95c6eea2f55b4cbb1ff28fe04bfc8f 100644 (file)
--- 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 836edad6908b8cec1e915485eeeeacfeb2a5d726..4270b6a1cfcb6447ca4aab9b3101030b3fae4851 100644 (file)
--- 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<typeof router>
-  }
-}
+// 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 514819b6e39ead28aa4d3fa2dbf47b0a2342676a..4a755be3c52fdfb809fd015da29076e8c0b454e1 100644 (file)
--- a/packages/playground/src/views/Nested.vue
+++ b/packages/playground/src/views/Nested.vue
@@ -3,7 +3,7 @@
     <p>Nested level {{ level }}</p>
     <ul v-if="level === 1 && $route.name === 'Nested'">
       <li>
-        <router-link to="/nested/nested">/nested/nested</router-link>
+        <RouterLink to="/nested/nested">/nested/nested</RouterLink>
       </li>
       <li>
         <router-link to="/anidado/nested">/anidado/nested</router-link>

diff --git a/packages/router/e2e/modal/index.ts b/packages/router/e2e/modal/index.ts
index f6db80d55455fedcac14420de9fa2076a6e9a8cb..215670e42095d2d5dda37d2de4183a817534bb0f 100644 (file)
--- a/packages/router/e2e/modal/index.ts
+++ b/packages/router/e2e/modal/index.ts
@@ -4,6 +4,7 @@ import {
   createRouter,
   createWebHistory,
   useRoute,
+  loadRouteLocation,
 } from 'vue-router'
 import {
   createApp,
@@ -30,11 +31,8 @@ async function showUserModal(id: number) {
   await router.push({
     name: 'user',
     params: { id },
-    // state: { backgroundView },
+    state: { backgroundView },
   })
-
-  history.replaceState({ ...history.state, backgroundView }, '')
-  historyState.value = history.state
 }
 
 function closeUserModal() {
@@ -73,7 +71,6 @@ const Home = defineComponent({
   setup() {
     const modal = ref<HTMLDialogElement | HTMLElement>()
     const route = useRoute()
-    // const historyState = computed(() => route.fullPath && window.history.state)
 
     const userId = computed(() => route.params.id)
 
@@ -165,12 +162,17 @@ router.afterEach(() => {
   historyState.value = history.state
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, from) => {
   console.log('---')
   console.log('going from', from.fullPath, 'to', to.fullPath)
   console.log('state:', window.history.state)
   console.log('---')
-  next()
+})
+
+router.beforeResolve(async to => {
+  if (historyState.value && historyState.value.backgroundView) {
+    await loadRouteLocation(router.resolve(historyState.value.backgroundView))
+  }
 })
 
 // avoid navigating to non existent users
@@ -186,7 +188,7 @@ router.beforeEach(to => {
 const app = createApp({
   setup() {
     const route = useRoute()
-    // const historyState = computed(() => route.fullPath && window.history.state)
+
     const routeWithModal = computed(() => {
       if (historyState.value.backgroundView) {
         return router.resolve(
@@ -197,7 +199,7 @@ const app = createApp({
       }
     })
 
-    return { route, routeWithModal, historyState, ...toRefs(route) }
+    return { routeWithModal }
   },
 
   template: `

diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
index d60028988151dd6db8190b45b528143e8d9d8d97..177693cc55c8812d88a6ec787095e4fcda2e7b55 100644 (file)
--- a/packages/router/src/router.ts
+++ b/packages/router/src/router.ts
@@ -185,7 +185,7 @@ export interface RouterOptions extends PathParserOptions {
 }
 
 /**
- * Router instance
+ * Router instance. **The `Options` generic is internal**.
  */
 export interface Router<Options extends RouterOptions = RouterOptions> {
   /**
@@ -360,7 +360,7 @@ export interface Router<Options extends RouterOptions = RouterOptions> {
 
   /**
    * Called automatically by `app.use(router)`. Should not be called manually by
-   * the user.
+   * the user. This will trigger the initial navigation when on client side.
    *
    * @internal
    * @param app - Application that uses the router