]> git.ipfire.org Git - thirdparty/vuejs/router.git/commitdiff
feat: improve route access
authorEduardo San Martin Morote <posva13@gmail.com>
Thu, 26 Mar 2020 16:45:12 +0000 (17:45 +0100)
committerEduardo San Martin Morote <posva13@gmail.com>
Thu, 26 Mar 2020 16:45:12 +0000 (17:45 +0100)
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 }
  }
  ```

playground/App.vue
src/index.ts
src/router.ts
src/utils/injectionSymbols.ts

index a18060e6f2be0f39cbe7032bf2d26f847a307d71..bd763a02205802a6d5556034b97536be5c271537 100644 (file)
@@ -158,7 +158,7 @@ export default defineComponent({
     const state = inject('state')
 
     const currentLocation = computed(() => {
-      const { matched, ...rest } = route.value
+      const { matched, ...rest } = route
       return rest
     })
 
index cbb6054a4e453e5b7cf51859ae7952f92cde6418..7eaab8c63b353cf14b689a02e6a76846b8874ce8 100644 (file)
@@ -1,9 +1,8 @@
 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'
 
@@ -34,11 +33,5 @@ export function useRouter() {
 }
 
 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)!
 }
index 667398bf22259b043cdc05bfc2826b36b2a01ec8..f3412f23898a01b7f2a38b0149ad4602af59c2ad 100644 (file)
@@ -38,7 +38,17 @@ import {
   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'
@@ -564,9 +574,19 @@ function applyRouterPlugin(app: App, router: Router) {
       },
     })
 
+  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> {
index 7f4f6e8c756393ec0d94111353072d1185dda55e..5921c0adf79343edbe9e8bbdb191deaaeaff409c 100644 (file)
@@ -1,4 +1,4 @@
-import { InjectionKey, ComputedRef, Ref } from 'vue'
+import { InjectionKey, ComputedRef } from 'vue'
 import {
   RouteLocationMatched,
   Immutable,
@@ -24,5 +24,5 @@ export const viewDepthKey = PolySymbol('rvd') as InjectionKey<number>
 export const routerKey = PolySymbol('r') as InjectionKey<Router>
 // rt = route location
 export const routeLocationKey = PolySymbol('rl') as InjectionKey<
-  Ref<Immutable<RouteLocationNormalizedResolved>>
+  Immutable<RouteLocationNormalizedResolved>
 >