vue-router

Dynamic Route Matching

This feature allows you to create routes that are dynamically matched to the path. For example, different user IDs can be matched to the same route pattern.

{"const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}"}

Nested Routes

This feature allows you to map nested paths to components. It's useful for creating sub-sections of a page without having to create complex configurations.

{"const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          path: 'profile',
          component: UserProfile
        }
      ]
    }
  ]
})
const User = {
  template: '<div>User <router-view></router-view></div>'
}"}

Programmatic Navigation

Vue-router allows you to navigate without using <router-link> by using the router instance methods.

{"router.push('/home')
router.replace('/home')
router.go(-1)"}

Named Routes

Instead of using URLs, you can navigate using route names, making your code more readable and maintainable.

{"const router = new VueRouter({
  routes: [
    { name: 'user', path: '/user/:id', component: User }
  ]
})
// navigate to a named route
router.push({ name: 'user', params: { id: 123 }})"}

Route Guards

Route guards are used to protect routes that require authentication, perform checks before entering a route, or confirm navigation away from a route.

{"const router = new VueRouter({
  routes: [
    { path: '/secret', component: Secret, beforeEnter: (to, from, next) => {
      // ... guard logic
      next();
    }}
  ]
})"}