Context
Our custom route composables useRouteQuery and useRouteParam write single params, so mounting a file list fires up to 5 separate router.replace calls. That means each time: currentRoute changes, route-derived computeds invalidate, the route subtree re-renders, and history.replaceState fires.
VueUse also provides these composables, and does several things better than we do. Hence we should use those over ours.
More issue with the current implementation
Stale dedupe causes redundant writes. The guard at useRouteQuery.ts:15 compares against router.currentRoute, which lags behind pending writes. Two composables registering the same param both see the old value and both enqueue a navigation.
The hash is dropped. router.replace({ path, query }) in useRouteQuery and useRouteParam omit hash, so any fragment is lost on a query write.
Navigation errors are swallowed in useRouteQuery.
What VueUse does instead
- Batches writes in a
WeakMap and flushes on nextTick, so all params changed in one tick become one router.replace.
- Passes params, query and hash through.
- Dedupes against a local value rather than
route.query, so the stale-read problem disappears.
- Offers a transform option (get/set) for value coercion, and mode:
'replace' | 'push'.
Context
Our custom route composables
useRouteQueryanduseRouteParamwrite single params, so mounting a file list fires up to 5 separaterouter.replacecalls. That means each time:currentRoutechanges, route-derived computeds invalidate, the route subtree re-renders, andhistory.replaceStatefires.VueUse also provides these composables, and does several things better than we do. Hence we should use those over ours.
More issue with the current implementation
Stale dedupe causes redundant writes. The guard at
useRouteQuery.ts:15compares againstrouter.currentRoute, which lags behind pending writes. Two composables registering the same param both see the old value and both enqueue a navigation.The hash is dropped.
router.replace({ path, query })inuseRouteQueryanduseRouteParamomit hash, so any fragment is lost on a query write.Navigation errors are swallowed in
useRouteQuery.What VueUse does instead
WeakMapand flushes onnextTick, so all params changed in one tick become onerouter.replace.route.query, so the stale-read problem disappears.'replace' | 'push'.