Router Internals — Series 2

Preview — 3 of 10 questions

Why would an app use createMemoryHistory() instead of createWebHistory()?

javascript

import { createRouter, createMemoryHistory } from 'vue-router'

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

AcreateMemoryHistory() is a drop-in production replacement for createWebHistory() that's simply faster, since it avoids browser API overhead

BcreateMemoryHistory() tracks navigation state entirely in-memory, with no dependency on the browser's URL bar, window.history, or even the DOM's window object at all — making it the standard choice for environments where there's no real browser: unit/component tests (asserting on route state without a real page), and server-side rendering (where a fresh, isolated in-memory history is needed per request, since there's no shared browser URL to read from)

CcreateMemoryHistory() is a legacy API kept only for backward compatibility with Vue Router 2 — new projects should always use one of the other history modes

DcreateMemoryHistory() requires a localStorage-compatible environment to persist navigation state between page loads

What kind of failure does this global handler specifically catch, that a navigation guard wouldn't?

javascript

router.onError((error, to, from) => {
  if (error.message.includes('Failed to fetch dynamically imported module')) {
    console.error('Chunk load failed, likely a stale deployment:', to.fullPath)
    window.location.reload() // force a full reload to get the latest deployed chunks
  }
})

Arouter.onError() catches guard-level rejections (like return false from beforeEach) — it's a general-purpose guard-cancellation handler

Brouter.onError() fires for uncaught errors thrown during the navigation process itself — most notably, failures loading an async route component's chunk (e.g. defineAsyncComponent/lazy import() failing because the deployed JS chunk no longer exists after a new deployment overwrote the old build's files) — a scenario navigation guards, which deal with allowing/blocking navigation, don't specifically handle

Crouter.onError() only fires for network errors made through fetch()/axios calls inside route components — it has nothing to do with routing itself

Drouter.onError() is called before every single navigation, as a pre-flight check, regardless of whether an error actually occurs

Given the URL /search?q=hello%20world, and a dynamic segment matched from a path containing %2F, what does Vue Router hand back in route.query/route.params?

javascript

// URL: /search?q=hello%20world
console.log(route.query.q) // ?

// URL: /files/docs%2Freport.pdf  (encoded forward slash inside a segment)
console.log(route.params.filename) // ?

AVue Router automatically decodes percent-encoded characters in both query values and path segment values before exposing them through route.query/route.params — route.query.q is 'hello world' (space decoded), and route.params.filename is 'docs/report.pdf' (the encoded slash decoded back to a literal / within that single captured segment)

BBoth values are returned exactly as they appear in the raw URL, still percent-encoded — 'hello%20world' and 'docs%2Freport.pdf'

CQuery values are decoded automatically, but path/param values are never decoded — those always require a manual decodeURIComponent() call

DDecoding only happens for query values; a %2F inside a path segment causes Vue Router to reject the URL as malformed

Answer all 10 questions (7 more), see explanations for every answer, and track your score.