Training Trains Internship
Student login
← Vue.js learning path
Vue.js · Module 7 of 10

Vue Router

Create multi-page apps with client-side routing.

📖 Key ideas

  1. Define routes: { path: "/about", component: About }.
  2. <RouterView /> shows the matched page.
  3. <RouterLink to="/about"> navigates.
  4. Dynamic routes: /users/:id, read with useRoute().params.id.
  5. Navigation guards (beforeEach) handle login checks.
💡 Real-life example: Vue Router is a lift: press a floor number (URL) and it opens the right floor (component).
RouterViewWhere matched component renders
RouterLinkNavigation link
useRouteReads current route info
beforeEachGlobal navigation guard