vue-router skill

Overview

This skill provides comprehensive guidance for using Vue Router in Vue.js applications, covering route configuration, dynamic and nested routes, navigation guards, programmatic navigation, and route meta fields. It focuses on practical patterns and examples that help you set up routing, protect routes, and manage transitions in single-page applications. Use it to design predictable navigation behavior and handle common routing scenarios efficiently.

How this skill works

The skill inspects common routing needs and explains how to declare routes, use router instances, and integrate router-link and router-view in components. It explains dynamic route parameters, nested child routes, named views, and lazy-loaded routes for performance. It also covers route guards (global, per-route, and in-component), programmatic navigation with router.push/replace, and using route meta to store authorization or transition info.

When to use it

• Setting up SPA navigation for small to large Vue applications
• Implementing protected routes and authentication flows
• Passing and validating dynamic route parameters
• Creating nested layouts or named view layouts
• Optimizing route loading with code-splitting and lazy routes
• Customizing transitions and behavior per route via meta fields

Best practices

• Keep route definitions declarative and organized in a single file or modular files for large apps
• Use lazy loading (dynamic import) for route components to improve initial load time
• Prefer router.push for forward navigation and router.replace to avoid adding history entries where appropriate
• Centralize authentication checks in global or per-route guards and keep in-component guards for UI-specific logic
• Store non-sensitive route behavior (roles, transitions) in route meta and read it from guards or components
• Validate and normalize route params before using them; use props: true to pass params as props to components

Example use cases

• Protecting admin pages: add a meta: { requiresAuth: true } and enforce it in a global beforeEach guard
• User profile pages: define dynamic route /users/:id and load data in beforeRouteEnter with server-side validation
• Nested dashboard: define a /dashboard route with child routes for analytics, settings, and reports using router-view
• Progressive loading: lazy-load heavy report components with dynamic import() and show a loading skeleton
• Role-based navigation: store allowedRoles in route meta and redirect unauthorized users to a login or 403 page

FAQ