How does a frontend router work? Deep dive with Vue Router
summary
Claims that complexity comes from overlapping responsibilities and shows a partial rewrite of Vue Router that splits history, matcher and router, moves route matching into a separate matcher module and reduces surface area of the history (old 300-line history vs new base of ~10 lines plus a 150-line URL parser). Demonstrates concrete fixes: a single popstate listener, handling Safari pushState quirks and inconsistent percent‑encoding, and a working push/guard flow with clearer async error handling.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 4:55Different kinds of routers
- 6:10Recap
- 9:05Vue Router Recap
- 15:24The Ugly Parts
- 15:35Global Guards
- 22:27History
- 23:16Responsibilities
- 26:06What can I show
- 31:21Encoding issues
- 36:16Router structure
- 37:06The matter
- 39:28Sorting Routes
- 40:19Dynamic Approach
- 40:34Current Routes
- 40:48Responsibility Expectations
- 41:18Sync Function
- 41:34Relative Routes
- 42:56Push History
- 44:04Location
- 52:03Extract component
- 53:18Summary
- 55:13Thank you
- 56:00Questions
related talks
31mGet the Most Out of Vue Router
26mVue-router and its techniques
35mExciting New Features for Routing in Vue3; Vue Router 4
01h 14mWhat's new in Vue 3 Routing
17mModern Routing
36mUnderstanding client side routing with Vue.js
30mTypesafe state in your URL
46mHow does an SPA router work? A practical case with Vue Router