Dynamic segments in route path marked with colon. Example: /user/:id. Access via useRoute().params or $route.params. Support optional parameters and custom regex patterns.
Component for declarative navigation. Supports to prop for destination, active class styling. Example: <router-link to='/path'>. Handles both literal and dynamic paths.
Routes with name property for reference. Use in router-link :to='{ name: 'route' }'. Support params binding. Avoid hard-coded URLs. Example: name: 'user'.
Use transition component around router-view. Support enter/leave transitions. Handle per-route transitions. Implement transition modes. Handle dynamic transitions.
Configure scrollBehavior in router options. Handle scroll position restoration. Support smooth scrolling. Implement scroll preservation. Handle async scrolling.
Define child routes in children array of parent route. Use router-view for nested components. Support multiple levels of nesting. Handle nested layouts.
Implement deployment strategies. Handle server configuration. Support hosting platforms. Implement deployment patterns.
Vue Router is the official routing library for Vue.js. Enables navigation between pages, supports nested routes, dynamic route matching, navigation guards, and route meta fields. Integrates with Vue.js transitions.
Middleware functions that guard navigations. Include beforeEach, beforeResolve, afterEach globally, and beforeEnter per route. Handle authentication and authorization.
Define alias property in routes. Support multiple aliases. Handle SEO considerations. Implement redirect patterns. Handle alias conflicts.
Install using npm/yarn, create router instance with createRouter(), configure routes array with path and component mappings. Use history mode (createWebHistory) or hash mode.
Navigate using router.push() or router.replace(). Support path object notation. Handle navigation with useRouter() in composition API. Support navigation parameters.
Access via useRoute().query or $route.query. Support multiple parameters. Handle URL encoding. Persist across navigations. Example: /search?q=term.
Custom fields in meta property of routes. Access via route.meta. Use for route-specific data. Handle authorization, transitions, or any custom data.
