Understanding client side routing with Vue.js
summary
Builds a working Pokemon single‑page app that starts with three routes and then shows how those become scalable with dynamic route matching. Implements a custom client-side router using Vue.js components, a router-view/router-link pattern, window.history.pushState and the event bus pattern, plus popstate handling, navigation guards, nested routes and lazy loading. Demonstrates which files map paths to components, the exact lifecycle hooks used, and when 404 behavior appears.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 0:49Vuejs overview
- 1:16What is routing
- 2:44What is URL
- 5:08Single page applications
- 6:15Building the application
- 7:34What are view components
- 9:46Creating other components
- 10:24Building the router
- 11:47View Dynamic Components
- 14:27Router Link
- 18:14Event Bus
- 21:11PopState
- 31:22Navigation Guards
- 33:48Lazy Loading
related talks
01h 00mHow does a frontend router work? Deep dive with Vue Router
31mGet the Most Out of Vue Router
32mVue, simple yet scalable
28mPast and future of client-side routing
43mRemaking Retro Games with Vue.js
01h 14mWhat's new in Vue 3 Routing
49mVue and Vuex: Structure your app with centralized state management
46mHow does an SPA router work? A practical case with Vue Router