BREAKING CHANGE: `useRoute` now retrieves a reactive RouteLocationNormalized instead of a Ref<RouteLocationNormalized>.
This means there is no need to use `.value` when accessing the route. You still need to wrap it with `toRefs` if you want to expose parts of the route:
```js
setup () {
return { params: toRefs(useRoute()).params }
}
```
const state = inject('state')
const currentLocation = computed(() => {
- const { matched, ...rest } = route.value
+ const { matched, ...rest } = route
return rest
})
import createWebHistory from './history/html5'
import createMemoryHistory from './history/memory'
import createWebHashHistory from './history/hash'
-import { inject, computed, reactive } from 'vue'
+import { inject } from 'vue'
import { routerKey, routeLocationKey } from './utils/injectionSymbols'
-import { RouteLocationNormalizedResolved } from './types'
export { LocationQuery, parseQuery, stringifyQuery } from './utils/query'
}
export function useRoute() {
- const route = inject(routeLocationKey)!
- const ret = {} as RouteLocationNormalizedResolved
- for (let key in route.value) {
- // @ts-ignore
- ret[key] = computed(() => route.value[key])
- }
- return reactive(ret)
+ return inject(routeLocationKey)!
}
parseQuery as originalParseQuery,
stringifyQuery as originalStringifyQuery,
} from './utils/query'
-import { ref, Ref, markNonReactive, nextTick, App, warn } from 'vue'
+import {
+ ref,
+ Ref,
+ markNonReactive,
+ nextTick,
+ App,
+ warn,
+ computed,
+ reactive,
+ ComputedRef,
+} from 'vue'
import { RouteRecordNormalized } from './matcher/types'
import { Link } from './components/Link'
import { View } from './components/View'
},
})
+ const reactiveRoute = {} as {
+ [k in keyof RouteLocationNormalizedResolved]: ComputedRef<
+ RouteLocationNormalizedResolved[k]
+ >
+ }
+ for (let key in START_LOCATION_NORMALIZED) {
+ // @ts-ignore: the key matches
+ reactiveRoute[key] = computed(() => router.currentRoute.value[key])
+ }
+
// TODO: merge strats?
app.provide(routerKey, router)
- app.provide(routeLocationKey, router.currentRoute)
+ app.provide(routeLocationKey, reactive(reactiveRoute))
}
async function runGuardQueue(guards: Lazy<any>[]): Promise<void> {
-import { InjectionKey, ComputedRef, Ref } from 'vue'
+import { InjectionKey, ComputedRef } from 'vue'
import {
RouteLocationMatched,
Immutable,
export const routerKey = PolySymbol('r') as InjectionKey<Router>
// rt = route location
export const routeLocationKey = PolySymbol('rl') as InjectionKey<
- Ref<Immutable<RouteLocationNormalizedResolved>>
+ Immutable<RouteLocationNormalizedResolved>
>