feat: handle unnested routes

playground/src/App.vue

@@ -1,4 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRoute } from '@vue-router'
+
+const route = useRoute()
+route.name === '/about'
+</script>
 
 <template>
   <header>
@@ -11,6 +16,8 @@
         <RouterLink :to="{ path: '/articles', query: { test: 'query', n: 2 } }"
           >About</RouterLink
         >
+        <button @click="$router.push('/oeu')">Click</button>
+        {{ $route.name === '' }}
       </nav>
     </div>
   </header>

playground/src/routes/[name].vue

@@ -7,6 +7,8 @@ import {
 } from '@vue-router'
 import type { RouterTyped } from '@vue-router'
 
+// const $route = useRoute()
+
 const router = useRouter()
 if (router.currentRoute.value.name === '/[name]') {
   router.currentRoute.value.params.name
@@ -20,6 +22,14 @@ onBeforeRouteUpdate((to) => {
   }
 })
 
+onBeforeRouteLeave((to, from) => {
+  if (from.name === '/[name]') {
+    from.params.name
+  } else if (to.name === '/articles/[id]+') {
+    to.params.id.map((id) => id)
+  }
+})
+
 router.resolve({ path: '' })
 router.resolve({ path: '/articles/:id' })
 router.resolve({ name: '/[name]', params: { name: 2 } }).params.name

playground/typed-router.d.ts

@@ -34,8 +34,8 @@ declare module '@vue-router/routes' {
     '/n-[[n]]/': RouteRecordInfo<'/n-[[n]]/', '/n-:n?/', Record<never, never>, Record<never, never>>,
     '/n-[[n]]/[[more]]+/[final]': RouteRecordInfo<'/n-[[n]]/[[more]]+/[final]', '/n-:n?/:more*/:final', { final: _ParamValue<true> }, { final: _ParamValue<false> }>,
     '/n-[[n]]/[[more]]+/': RouteRecordInfo<'/n-[[n]]/[[more]]+/', '/n-:n?/:more*/', Record<never, never>, Record<never, never>>,
+    '/users/[id].edit': RouteRecordInfo<'/users/[id].edit', '/users/:id/edit', { id: _ParamValue<true> }, { id: _ParamValue<false> }>,
     '/users/[id]': RouteRecordInfo<'/users/[id]', '/users/:id', { id: _ParamValue<true> }, { id: _ParamValue<false> }>,
-    '/users/edit': RouteRecordInfo<'/users/edit', '/users/edit', Record<never, never>, Record<never, never>>,
     '/users/': RouteRecordInfo<'/users/', '/users/', Record<never, never>, Record<never, never>>,
     '/deep/nesting/works/[[files]]+': RouteRecordInfo<'/deep/nesting/works/[[files]]+', '/deep/nesting/works/:files*', { files?: _ParamValueZeroOrMore<true> }, { files?: _ParamValueZeroOrMore<false> }>,
     '/deep/nesting/works/too': RouteRecordInfo<'/deep/nesting/works/too', '/deep/nesting/works/too', Record<never, never>, Record<never, never>>,
@@ -45,8 +45,6 @@ declare module '@vue-router/routes' {
 declare module '@vue-router' {
   import type { RouteNamedMap } from '@vue-router/routes'
 
-  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
-
   export type RouterTyped = _RouterTyped<RouteNamedMap>
   /**
    * Generate a type safe route location. Requires the name of the route to be passed as a generic.
@@ -62,14 +60,25 @@ declare module '@vue-router' {
   export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
 
   export function useRouter(): RouterTyped
+  export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
 
-  export function onBeforeRouteLeave(guard: NavigationGuard<RouteMap>): void
-  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteMap>): void
+  export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
+  export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
 }
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   import type { RouteNamedMap } from '@vue-router/routes'
 
+  export interface ComponentCustomOptions {
+    beforeRouteUpdate?: NavigationGuard<RouteNamedMap>
+    beforeRouteLeave?: NavigationGuard<RouteNamedMap>
+  }
+
+  export interface ComponentCustomProperties {
+    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
+    $router: _RouterTyped<RouteNamedMap>
+  }
+
   export interface GlobalComponents {
     RouterLink: RouterLinkTyped<RouteNamedMap>
   }