refactor(router): merge createHref into resolve

BREAKING CHANGE: createHref is removed from the router. Instead, resolve returns a location object with the corresponding `href` property
vuejs · Apr 17, 2020 · 66b2db9 · 66b2db9
1 parent 2f37f6a
commit 66b2db9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 18 deletions.
diff --git a/__tests__/RouterLink.spec.ts b/__tests__/RouterLink.spec.ts
@@ -7,7 +7,6 @@ import {
   RouteQueryAndHash,
   MatcherLocationRaw,
   RouteLocationNormalized,
-  RouteLocation,
 } from '../src/types'
 import { createMemoryHistory } from '../src'
 import { mount, createMockedRoute } from './mount'
@@ -32,18 +31,21 @@ records.parentAlias = {
 } as RouteRecordNormalized
 records.childAlias = { aliasOf: records.child } as RouteRecordNormalized
 
+type RouteLocationResolved = RouteLocationNormalized & { href: string }
+
 const locations: Record<
   string,
   {
     string: string
-    normalized: RouteLocationNormalized
+    normalized: RouteLocationResolved
     toResolve?: MatcherLocationRaw & Required<RouteQueryAndHash>
   }
 > = {
   basic: {
     string: '/home',
     // toResolve: { path: '/home', fullPath: '/home', undefined, query: {}, hash: '' },
     normalized: {
+      href: '/home',
       fullPath: '/home',
       path: '/home',
       params: {},
@@ -60,6 +62,7 @@ const locations: Record<
     // toResolve: { path: '/home', fullPath: '/home', undefined, query: {}, hash: '' },
     normalized: {
       fullPath: '/foo',
+      href: '/foo',
       path: '/foo',
       params: {},
       meta: {},
@@ -75,6 +78,7 @@ const locations: Record<
     // toResolve: { path: '/home', fullPath: '/home', undefined, query: {}, hash: '' },
     normalized: {
       fullPath: '/home?foo=a&bar=b',
+      href: '/home?foo=a&bar=b',
       path: '/home',
       params: {},
       meta: {},
@@ -89,6 +93,7 @@ const locations: Record<
     string: '/p/1/2',
     normalized: {
       fullPath: '/p/1/2',
+      href: '/p/1/2',
       path: '/p/1/2',
       params: { p: ['1', '2'] },
       meta: {},
@@ -103,6 +108,7 @@ const locations: Record<
     string: '/p/1/2/3',
     normalized: {
       fullPath: '/p/1/2/3',
+      href: '/p/1/2/3',
       path: '/p/1/2/3',
       params: { p: ['1', '2', '3'] },
       meta: {},
@@ -117,6 +123,7 @@ const locations: Record<
     string: '/alias',
     normalized: {
       fullPath: '/alias',
+      href: '/alias',
       path: '/alias',
       params: {},
       meta: {},
@@ -133,6 +140,7 @@ const locations: Record<
     string: '/parent',
     normalized: {
       fullPath: '/parent',
+      href: '/parent',
       path: '/parent',
       params: {},
       meta: {},
@@ -147,6 +155,7 @@ const locations: Record<
     string: '/p',
     normalized: {
       fullPath: '/p',
+      href: '/p',
       path: '/p',
       params: {},
       meta: {},
@@ -162,6 +171,7 @@ const locations: Record<
     string: '/parent/child',
     normalized: {
       fullPath: '/parent/child',
+      href: '/parent/child',
       path: '/parent/child',
       params: {},
       meta: {},
@@ -176,6 +186,7 @@ const locations: Record<
     string: '/absolute-child',
     normalized: {
       fullPath: '/absolute-child',
+      href: '/absolute-child',
       path: '/absolute-child',
       params: {},
       meta: {},
@@ -190,6 +201,7 @@ const locations: Record<
     string: '/p/child',
     normalized: {
       fullPath: '/p/child',
+      href: '/p/child',
       path: '/p/child',
       params: {},
       meta: {},
@@ -204,6 +216,7 @@ const locations: Record<
     string: '/parent/c',
     normalized: {
       fullPath: '/parent/c',
+      href: '/parent/c',
       path: '/parent/c',
       params: {},
       meta: {},
@@ -218,6 +231,7 @@ const locations: Record<
     string: '/p/c',
     normalized: {
       fullPath: '/p/c',
+      href: '/p/c',
       path: '/p/c',
       params: {},
       meta: {},
@@ -232,6 +246,7 @@ const locations: Record<
     string: '/not-found',
     normalized: {
       fullPath: '/not-found',
+      href: '/not-found',
       path: '/not-found',
       params: {},
       meta: {},
@@ -247,7 +262,7 @@ const locations: Record<
 async function factory(
   currentLocation: RouteLocationNormalized,
   propsData: any,
-  resolvedLocation: RouteLocation,
+  resolvedLocation: RouteLocationResolved,
   slotTemplate: string = ''
 ) {
   const route = createMockedRoute(currentLocation)

diff --git a/__tests__/__snapshots__/RouterLink.spec.ts.snap b/__tests__/__snapshots__/RouterLink.spec.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RouterLink v-slot provides information on v-slot 1`] = `"<a aria-current=\\"page\\" href=\\"/home\\" class=\\"router-link-active router-link-exact-active\\"><span> route: {\\"fullPath\\":\\"/home\\",\\"path\\":\\"/home\\",\\"params\\":{},\\"meta\\":{},\\"query\\":{},\\"hash\\":\\"\\",\\"matched\\":[{}]} href: \\"/home\\" isActive: \\"true\\" isExactActive: \\"true\\" </span></a>"`;
+exports[`RouterLink v-slot provides information on v-slot 1`] = `"<a aria-current=\\"page\\" href=\\"/home\\" class=\\"router-link-active router-link-exact-active\\"><span> route: {\\"href\\":\\"/home\\",\\"fullPath\\":\\"/home\\",\\"path\\":\\"/home\\",\\"params\\":{},\\"meta\\":{},\\"query\\":{},\\"hash\\":\\"\\",\\"matched\\":[{}]} href: \\"/home\\" isActive: \\"true\\" isExactActive: \\"true\\" </span></a>"`;
diff --git a/src/components/Link.ts b/src/components/Link.ts
@@ -27,7 +27,6 @@ export function useLink(props: UseLinkOptions) {
   const currentRoute = inject(routeLocationKey)!
 
   const route = computed(() => router.resolve(unref(props.to)))
-  const href = computed(() => router.createHref(route.value))
 
   const activeRecordIndex = computed<number>(() => {
     // TODO: handle children with empty path: they should relate to their parent
@@ -61,7 +60,7 @@ export function useLink(props: UseLinkOptions) {
 
   return {
     route,
-    href,
+    href: computed(() => route.value.href),
     isActive,
     isExactActive,
     navigate,

diff --git a/src/router.ts b/src/router.ts
@@ -93,8 +93,8 @@ export interface Router {
   hasRoute(name: RouteRecordName): boolean
   getRoutes(): RouteRecord[]
 
-  resolve(to: RouteLocationRaw): RouteLocation
-  createHref(to: RouteLocation): string
+  resolve(to: RouteLocationRaw): RouteLocation & { href: string }
+
   push(to: RouteLocationRaw): Promise<TODO>
   replace(to: RouteLocationRaw): Promise<TODO>
 
@@ -127,10 +127,6 @@ export function createRouter({
     window.history.scrollRestoration = 'manual'
   }
 
-  function createHref(to: RouteLocation): string {
-    return history.base + to.fullPath
-  }
-
   const encodeParams = applyToParams.bind(null, encodeParam)
   const decodeParams = applyToParams.bind(null, decode)
 
@@ -171,7 +167,7 @@ export function createRouter({
   function resolve(
     location: RouteLocationRaw,
     currentLocation?: RouteLocationNormalizedLoaded
-  ): RouteLocation {
+  ): RouteLocation & { href: string } {
     // const objectLocation = routerLocationAsObject(location)
     currentLocation = currentLocation || currentRoute.value
     if (typeof location === 'string') {
@@ -182,10 +178,18 @@ export function createRouter({
       )
 
       return {
+        // fullPath: locationNormalized.fullPath,
+        // query: locationNormalized.query,
+        // hash: locationNormalized.hash,
         ...locationNormalized,
         ...matchedRoute,
+        // path: matchedRoute.path,
+        // name: matchedRoute.name,
+        // meta: matchedRoute.meta,
+        // matched: matchedRoute.matched,
         params: decodeParams(matchedRoute.params),
         redirectedFrom: undefined,
+        href: history.base + locationNormalized.fullPath,
       }
     }
 
@@ -205,15 +209,18 @@ export function createRouter({
         ? location.params!
         : decodeParams(matchedRoute.params)
 
+    const fullPath = stringifyURL(stringifyQuery, {
+      ...location,
+      path: matchedRoute.path,
+    })
+
     return {
-      fullPath: stringifyURL(stringifyQuery, {
-        ...location,
-        path: matchedRoute.path,
-      }),
+      fullPath,
       hash: location.hash || '',
       query: normalizeQuery(location.query),
       ...matchedRoute,
       redirectedFrom: undefined,
+      href: history.base + fullPath,
     }
   }
 
@@ -560,7 +567,6 @@ export function createRouter({
 
     beforeEach: beforeGuards.add,
     afterEach: afterGuards.add,
-    createHref,
 
     onError: errorHandlers.add,
     isReady,