router-usage

Name: router-usage
Availability: InStock
Author: cctyl

Standardizes Vue Router route configuration, navigation, guards, and parameter passing.

Updated Jan 16, 2025

Search Tags:#routing #vue #navigation #router #guard #vue-router #dynamic-routing

Ready to run

npx skills add https://github.com/cctyl/bili-rec-web --skill router-usage

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: router-usage
Source: https://github.com/cctyl/bili-rec-web/tree/main/.claude/skills/router-usage
Command: npx skills add https://github.com/cctyl/bili-rec-web --skill router-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes and standardizes Vue Router routing practices for Vue applications, reducing boilerplate and errors in route configuration, navigation, and guards.

Core Features & Use Cases

Standardized route configuration: defines a consistent structure for routes, guards, and dynamic parameters.
Navigation & parameter handling: demonstrates both programmatic navigation and param passing via $route/$router.
Guard & meta usage: shows how to implement beforeEach, afterEach, and route meta to enforce permissions and titles.
Quick-start examples: provides practical patterns to add new routes, guard access, and manage nested routes.

Quick Start

Add a new route with a guard following the pattern described in this skill and verify navigation works as expected.

Frequently Asked Questions about router-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I configure Vue Router dynamic routing and route guards?▼

Vue Router dynamic routing and route guards are configured by defining route meta fields for permissions and using beforeEach to enforce access control before navigation occurs.

What is the best way to standardize Vue Router navigation and parameter passing?▼

Standardize Vue Router navigation by using programmatic navigation with $router and accessing dynamic parameters via $route to ensure consistent param passing across components.

Can I use route meta and afterEach guards to manage page titles in Vue?▼

Yes, route meta fields can store page titles and afterEach guards can apply them to the document, enforcing consistent navigation metadata updates after route completion.

How do I add a new route with nested routes in a Vue application?▼

Add new nested routes by defining children arrays within the parent route configuration object, ensuring the parent component includes a router-view for child component rendering.

Why does my Vue Router beforeEach guard block expected navigation access?▼

Vue Router beforeEach guards block navigation when route meta permission checks fail, requiring you to verify that meta fields correctly match the user's authorization level.