perf: avoid depending on the current route to resolve absolute locations

Author: danielroe

packages/router/__tests__/router.spec.ts

@@ -2,6 +2,7 @@
  * @vitest-environment happy-dom
  */
 import fakePromise from 'faked-promise'
+import { computed, effectScope } from 'vue'
 import type { RouteLocationRaw } from '../src/typed-routes'
 import { createRouter } from '../src/router'
 import { createMemoryHistory } from '../src/history/memory'
@@ -1030,6 +1031,93 @@ describe('Router', () => {
     })
   })
 
+  describe('resolve reactivity', () => {
+    it('resolves absolute locations the same regardless of the current location', async () => {
+      const { router } = await newRouter()
+      const locations: RouteLocationRaw[] = [
+        '/',
+        '/foo',
+        '/foo?q=1#h',
+        '/p/abc',
+        { path: '/foo', query: { q: '1' }, hash: '#h' },
+      ]
+      const before = locations.map(to => router.resolve(to))
+      await router.push('/parent/child')
+      const after = locations.map(to => router.resolve(to))
+      expect(after).toStrictEqual(before)
+    })
+
+    it('does not re-run a computed with an absolute location on navigation', async () => {
+      const { router } = await newRouter()
+      const scope = effectScope()
+      let runs = 0
+      const route = scope.run(() =>
+        computed(() => {
+          runs++
+          return router.resolve('/foo')
+        })
+      )!
+      expect(route.value.name).toBe('Foo')
+      expect(runs).toBe(1)
+      await router.push('/search')
+      expect(route.value.name).toBe('Foo')
+      expect(runs).toBe(1)
+      scope.stop()
+    })
+
+    it('re-runs a computed with a relative location on navigation', async () => {
+      const { router } = await newRouter()
+      const scope = effectScope()
+      const route = scope.run(() => computed(() => router.resolve('child')))!
+      expect(route.value.path).toBe('/child')
+      await router.push('/parent/child')
+      expect(route.value.path).toBe('/parent/child')
+      scope.stop()
+    })
+
+    it('re-runs a computed with a named location inheriting params on navigation', async () => {
+      const { router } = await newRouter()
+      await router.push('/p/a')
+      const scope = effectScope()
+      const route = scope.run(() =>
+        computed(() => router.resolve({ name: 'Param' }))
+      )!
+      expect(route.value.path).toBe('/p/a')
+      await router.push('/p/b')
+      expect(route.value.path).toBe('/p/b')
+      scope.stop()
+    })
+
+    it('re-runs a computed when routes are added or removed', async () => {
+      const { router } = await newRouter({ routes: [routes[0]] })
+      const scope = effectScope()
+      const route = scope.run(() => computed(() => router.resolve('/late')))!
+      expect(route.value.matched).toHaveLength(0)
+      expect('No match found').toHaveBeenWarned()
+      const remove = router.addRoute({
+        path: '/late',
+        name: 'late',
+        component: components.Foo,
+      })
+      expect(route.value.matched).toHaveLength(1)
+      remove()
+      expect(route.value.matched).toHaveLength(0)
+      router.addRoute({ path: '/late', component: components.Foo })
+      expect(route.value.matched).toHaveLength(1)
+      router.clearRoutes()
+      expect(route.value.matched).toHaveLength(0)
+      scope.stop()
+    })
+
+    it('uses an explicitly passed currentLocation', async () => {
+      const { router } = await newRouter()
+      const current = router.resolve('/parent/child')
+      expect(router.resolve('child', current).path).toBe('/parent/child')
+      await router.push('/foo')
+      expect(router.resolve('child', current).path).toBe('/parent/child')
+    })
+  })
+
   describe('Dynamic Routing', () => {
     it('resolves new added routes', async () => {
       const { router } = await newRouter({ routes: [] })

packages/router/__tests__/useLink.spec.ts

@@ -94,6 +94,42 @@ describe('useLink', () => {
     })
   })
 
+  describe('active state', () => {
+    it('updates isActive and isExactActive after navigation', async () => {
+      const router = createRouter({
+        history: createMemoryHistory(),
+        routes: [
+          { path: '/', component: {} },
+          { path: '/a', component: {} },
+          { path: '/b', component: {} },
+        ],
+      })
+      await router.push('/')
+
+      let link!: ReturnType<typeof useLink>
+      mount(
+        {
+          setup() {
+            link = useLink({ to: '/a' })
+            return () => ''
+          },
+        },
+        { global: { plugins: [router] } }
+      )
+
+      expect(link.isActive.value).toBe(false)
+      expect(link.isExactActive.value).toBe(false)
+
+      await router.push('/a')
+      expect(link.isActive.value).toBe(true)
+      expect(link.isExactActive.value).toBe(true)
+
+      await router.push('/b')
+      expect(link.isActive.value).toBe(false)
+      expect(link.isExactActive.value).toBe(false)
+    })
+  })
+
   describe('warnings', () => {
     mockWarn()
 

packages/router/src/router.ts

@@ -163,6 +163,9 @@ export function createRouter(options: RouterOptions): Router {
   const currentRoute = shallowRef<RouteLocationNormalizedLoaded>(
     START_LOCATION_NORMALIZED
   )
+  // incremented whenever the route table changes so that `resolve()` can be
+  // used within `computed()` and still pick up added or removed routes
+  const routesVersion = shallowRef(0)
   let pendingLocation: RouteLocation = START_LOCATION_NORMALIZED
 
   // leave the scrollRestoration if no scrollBehavior is provided
@@ -195,18 +198,29 @@ export function createRouter(options: RouterOptions): Router {
       record = parentOrRoute
     }
 
-    return matcher.addRoute(record, parent)
+    const removeRoute = matcher.addRoute(record, parent)
+    routesVersion.value++
+    return () => {
+      removeRoute()
+      routesVersion.value++
+    }
   }
 
   function removeRoute(name: NonNullable<RouteRecordNameGeneric>) {
     const recordMatcher = matcher.getRecordMatcher(name)
     if (recordMatcher) {
       matcher.removeRoute(recordMatcher)
+      routesVersion.value++
     } else if (__DEV__) {
       diagnostics.VUE_ROUTER_R0002({ name: String(name) })
     }
   }
 
+  function clearRoutes() {
+    matcher.clearRoutes()
+    routesVersion.value++
+  }
+
   function getRoutes() {
     return matcher.getRoutes().map(routeMatcher => routeMatcher.record)
   }
@@ -221,9 +235,17 @@ export function createRouter(options: RouterOptions): Router {
   ): RouteLocationResolved {
     // const resolve: Router['resolve'] = (rawLocation: RouteLocationRaw, currentLocation) => {
     // const objectLocation = routerLocationAsObject(rawLocation)
-    // we create a copy to modify it later
-    currentLocation = assign({}, currentLocation || currentRoute.value)
+    // depend on the route table so `computed()`s using `resolve()` are
+    // invalidated when routes are added or removed
+    routesVersion.value
     if (typeof rawLocation === 'string') {
+      // absolute locations do not depend on where the user currently is, so
+      // we avoid reading `currentRoute` to not track it as a dependency
+      currentLocation =
+        currentLocation ||
+        (rawLocation.startsWith('/')
+          ? START_LOCATION_NORMALIZED
+          : currentRoute.value)
       const locationNormalized = parseURL(
         parseQuery,
         rawLocation,
@@ -257,6 +279,17 @@ export function createRouter(options: RouterOptions): Router {
       return resolve({})
     }
 
+    // we create a copy to modify it later
+    currentLocation = assign(
+      {},
+      currentLocation ||
+        (rawLocation.path != null &&
+        rawLocation.path.startsWith('/') &&
+        !('name' in rawLocation && rawLocation.name)
+          ? START_LOCATION_NORMALIZED
+          : currentRoute.value)
+    )
+
     let matcherLocation: MatcherLocationRaw
 
     // path could be relative in object as well
@@ -995,7 +1028,7 @@ export function createRouter(options: RouterOptions): Router {
 
     addRoute,
     removeRoute,
-    clearRoutes: matcher.clearRoutes,
+    clearRoutes,
     hasRoute,
     getRoutes,
     resolve,