SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsvue-router-v4

vue-router-v4

Frontend & websites

View repository

Updated 10-15 15:25

About this skill

When to use this skill

Use this skill whenever the user wants to:

  • Set up routing in a Vue 3 application
  • Configure routes, nested routes, and named routes
  • Implement navigation guards (global, per-route, in-component)
  • Use programmatic navigation with router.push(), router.replace(), etc.
  • Handle dynamic route matching and route parameters
  • Work with route meta fields and route records
  • Implement lazy loading and code splitting for routes
  • Use Vue Router with Composition API (useRouter, useRoute)
  • Configure different history modes (hash, HTML5 history, memory)
  • Handle scroll behavior and transitions
  • Implement typed routes with TypeScript
  • Migrate from Vue Router 3 to Vue Router 4
  • Extend RouterLink component
  • Handle navigation failures and errors
  • Work with dynamic routing (adding/removing routes at runtime)

How to use this skill

This skill is organized to match the Vue Router official documentation structure (https://router.vuejs.org/guide/, https://router.vuejs.org/api/). When working with Vue Router:

  1. Identify the topic from the user's request:

    • Getting started/Quick start → examples/essentials/getting-started.md
    • Dynamic route matching/Dynamic route matching → examples/essentials/dynamic-route-matching.md
    • Routes matching syntax/Route matching syntax → examples/essentials/routes-matching-syntax.md
    • Named routes/Named routes → examples/essentials/named-routes.md
    • Nested routes/Nested routes → examples/essentials/nested-routes.md
    • Programmatic navigation/Programmatic navigation → examples/essentials/programmatic-navigation.md
    • Named views/Named views → examples/essentials/named-views.md
    • Redirect and alias/Redirect and alias → examples/essentials/redirect-alias.md
    • Passing props to route components/Passing props to route components → examples/essentials/passing-props.md
    • Different history modes/Different history modes → examples/essentials/different-history-modes.md
    • Navigation guards/Navigation guards → examples/advanced/navigation-guards.md
    • Route meta fields/Route meta fields → examples/advanced/route-meta-fields.md
    • Data fetching/Data fetching → examples/advanced/data-fetching.md
    • Composition API/Composition API → examples/advanced/composition-api.md
    • RouterView slot/RouterView slot → examples/advanced/routerview-slot.md
    • Transitions/Transitions → examples/advanced/transitions.md
    • Scroll behavior/Scroll behavior → examples/advanced/scroll-behavior.md
    • Lazy loading routes/Lazy loading routes → examples/advanced/lazy-loading-routes.md
    • Typed routes/Typed routes → examples/advanced/typed-routes.md
    • Extending RouterLink/Extending RouterLink → examples/advanced/extending-router-link.md
    • Navigation failures/Navigation failures → examples/advanced/navigation-failures.md
    • Dynamic routing/Dynamic routing → examples/advanced/dynamic-routing.md

  2. Load the appropriate example file from the examples/ directory:

    Essentials (Basics) - examples/essentials/:

    • examples/essentials/getting-started.md - Creating a router and basic setup
    • examples/essentials/dynamic-route-matching.md - Dynamic route matching with params
    • examples/essentials/routes-matching-syntax.md - Route matching syntax and patterns
    • examples/essentials/named-routes.md - Named routes and navigation
    • examples/essentials/nested-routes.md - Nested routes and RouterView
    • examples/essentials/programmatic-navigation.md - Programmatic navigation with router methods
    • examples/essentials/named-views.md - Named views and multiple RouterView
    • examples/essentials/redirect-alias.md - Redirects and aliases
    • examples/essentials/passing-props.md - Passing props to route components
    • examples/essentials/different-history-modes.md - Hash, HTML5 history, and memory modes

    Advanced (Advanced) - examples/advanced/:

    • examples/advanced/navigation-guards.md - Global, per-route, and in-component guards
    • examples/advanced/route-meta-fields.md - Route meta fields and custom data
    • examples/advanced/data-fetching.md - Data fetching strategies
    • examples/advanced/composition-api.md - Using useRouter() and useRoute() with Composition API
    • examples/advanced/routerview-slot.md - RouterView slot props
    • examples/advanced/transitions.md - Route transitions and animations
    • examples/advanced/scroll-behavior.md - Scroll behavior configuration
    • examples/advanced/lazy-loading-routes.md - Lazy loading routes and code splitting
    • examples/advanced/typed-routes.md - TypeScript typed routes
    • examples/advanced/extending-router-link.md - Extending RouterLink component
    • examples/advanced/navigation-failures.md - Handling navigation failures
    • examples/advanced/dynamic-routing.md - Adding and removing routes dynamically

  3. Follow the specific instructions in that example file for syntax, structure, and best practices

    Important Notes:

    • All examples follow Vue Router 4 API
    • Examples include both JavaScript and TypeScript versions where applicable
    • Each example file includes key concepts, code examples, and key points
    • Always check the example file for best practices and common patterns

  4. Reference API documentation in the api/ directory when needed:

    • api/router.md - Router instance API (createRouter, addRoute, removeRoute, etc.)
    • api/route-records.md - Route record types and properties
    • api/useRouter-useRoute.md - Composition API functions (useRouter, useRoute)
    • api/navigation-helpers.md - Navigation helper functions
    • api/router-link-router-view-components.md - RouterLink and RouterView components
    • api/history-modes-api.md - History mode APIs
    • api/error-and-failure-types.md - Error and failure types

  5. Use templates from the templates/ directory:

    • templates/router-setup.md - Router setup templates
    • templates/route-config.md - Route configuration templates

Examples and Templates

This skill includes detailed examples organized to match the Vue Router official documentation structure (https://router.vuejs.org/guide/, https://router.vuejs.org/api/). All examples are in the examples/ directory, organized by topic:

Essentials (Basics) - examples/essentials/

  • examples/essentials/getting-started.md - Creating a router, installing Vue Router, and basic setup
  • examples/essentials/dynamic-route-matching.md - Dynamic route matching with params and query
  • examples/essentials/routes-matching-syntax.md - Route matching syntax, catch-all routes, and regex
  • examples/essentials/named-routes.md - Named routes and navigation with names
  • examples/essentials/nested-routes.md - Nested routes and nested RouterView
  • examples/essentials/programmatic-navigation.md - Programmatic navigation with router.push(), router.replace(), router.go()
  • examples/essentials/named-views.md - Named views and multiple RouterView components
  • examples/essentials/redirect-alias.md - Redirects and aliases configuration
  • examples/essentials/passing-props.md - Passing props to route components
  • examples/essentials/different-history-modes.md - Hash mode, HTML5 history mode, and memory mode

Advanced (Advanced) - examples/advanced/

  • examples/advanced/navigation-guards.md - Global guards, per-route guards, and in-component guards
  • examples/advanced/route-meta-fields.md - Route meta fields and accessing meta in guards
  • examples/advanced/data-fetching.md - Data fetching strategies (before navigation, after navigation)
  • examples/advanced/composition-api.md - Using useRouter() and useRoute() with Composition API
  • examples/advanced/routerview-slot.md - RouterView slot props and custom rendering
  • examples/advanced/transitions.md - Route transitions and animations
  • examples/advanced/scroll-behavior.md - Scroll behavior configuration
  • examples/advanced/lazy-loading-routes.md - Lazy loading routes and code splitting
  • examples/advanced/typed-routes.md - TypeScript typed routes and type safety
  • examples/advanced/extending-router-link.md - Extending RouterLink component
  • examples/advanced/navigation-failures.md - Handling navigation failures and errors
  • examples/advanced/dynamic-routing.md - Adding and removing routes dynamically at runtime

Templates Directory (templates/)

  • templates/router-setup.md - Router setup templates for different scenarios
  • templates/route-config.md - Route configuration templates

To use examples:

  • Identify the topic from the user's request
  • Load the appropriate example file from the corresponding directory
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case

To use templates:

  • Reference templates/router-setup.md for router setup templates
  • Use templates/route-config.md for route configuration templates
  • Adapt templates to your specific needs and coding style

API Reference

Detailed API documentation is available in the api/ directory, organized to match the official Vue Router API documentation structure:

Router API (api/router.md)

  • createRouter() - Creating a router instance
  • Router instance methods: addRoute(), removeRoute(), hasRoute(), getRoutes(), push(), replace(), go(), back(), forward()
  • Router instance properties: currentRoute, options

Route Records API (api/route-records.md)

  • Route record types and properties
  • Route configuration options

Composition API (api/useRouter-useRoute.md)

  • useRouter() - Access router instance in setup
  • useRoute() - Access current route in setup

Navigation Helpers (api/navigation-helpers.md)

  • Navigation helper functions and utilities

Components API (api/router-link-router-view-components.md)

  • RouterLink component props and usage
  • RouterView component props and usage

History Modes API (api/history-modes-api.md)

  • createWebHistory() - HTML5 history mode
  • createWebHashHistory() - Hash mode
  • createMemoryHistory() - Memory mode

Error and Failure Types (api/error-and-failure-types.md)

  • Navigation failure types
  • Error handling

To use API reference:

  1. Identify the API you need help with
  2. Load the corresponding API file from the api/ directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the examples/ directory

Best Practices

  1. Use named routes: Use named routes for better maintainability and refactoring
  2. Lazy load routes: Use dynamic imports for route components to enable code splitting
  3. Type safety: Use TypeScript with typed routes for better type safety
  4. Navigation guards: Use navigation guards appropriately (global, per-route, in-component)
  5. Route meta: Use route meta fields for custom data and permissions
  6. History mode: Choose the appropriate history mode based on deployment environment
  7. Scroll behavior: Configure scroll behavior for better UX
  8. Error handling: Handle navigation failures gracefully

Resources

Keywords

Vue Router, router, routing, navigation, route, routes, nested routes, named routes, dynamic routes, route params, route query, navigation guards, route meta, programmatic navigation, RouterLink, RouterView, useRouter, useRoute, history mode, hash mode, HTML5 history, lazy loading, code splitting, typed routes, TypeScript, routing, navigation, navigation guards, nested routes, named routes, dynamic routes, programmatic navigation, lazy loading, typed routes