skills.rest
sayali-ingle-pdl
sayali-ingle-pdlCOMMUNITY
Explore all skills by this author →
GitHub

router

Generate a Vue Router setup file with hash-based routing and navigation guards.

Updated Nov 20, 2025
Search Tags:#vue#router#code-generation#web-app#vue-router#navigation-guards#hash-history
One-click install
npx skills add https://github.com/sayali-ingle-pdl/adusa-ai-vuejs-app-template --skill router-sayali-ingle-pdl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: router
Source: https://github.com/sayali-ingle-pdl/adusa-ai-vuejs-app-template/tree/main/.github/agents/app-starter/agents-context/skills/router
Command: npx skills add https://github.com/sayali-ingle-pdl/adusa-ai-vuejs-app-template --skill router-sayali-ingle-pdl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates a complete Vue Router setup for Vue.js applications, including hash-based routing and navigation guards.

Core Features & Use Cases

  • Creates src/router/index.ts with a configured Vue Router instance and route definitions.
  • Enforces hash-based history via createWebHashHistory and adds navigation guards to protect routes (home and other pages) while excluding the 404 page.
  • Adapts to application type using two import strategies: direct imports for micro-frontend deployments and lazy-loaded components for standalone apps.

Quick Start

Run the router skill to generate src/router/index.ts with the configured routes and guards.

Frequently Asked Questions about router

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

FAQPage Schema
How do I set up Vue Router with hash-based history and navigation guards?▼

To set up Vue Router with hash-based history, generate a src/router/index.ts file using createWebHashHistory and apply navigation guards to protect designated routes while excluding the 404 page from authentication checks.

What is the best way to configure Vue Router for a micro-frontend application?▼

Configuring Vue Router for a micro-frontend application requires using direct component imports instead of lazy loading, ensuring route integration within a larger distributed architecture while maintaining hash-based routing and guard protection.

How do I add navigation guards to a 404 page-not-found route in Vue Router?▼

You should exclude the 404 page-not-found route from navigation guards. The generated Vue Router setup applies guards to protected pages like the home route, intentionally bypassing guard enforcement for the 404 fallback route.

Can I use lazy-loaded routes with createWebHashHistory in a standalone Vue app?▼

Yes, standalone Vue.js applications use lazy-loaded route components with createWebHashHistory. This import strategy reduces initial bundle size by loading page components on demand during navigation.

Does Vue Router support hash history for both standalone and micro-frontend deployments?▼

Vue Router supports hash history across both standalone and micro-frontend deployments. It adapts the component import strategy—using lazy loading for standalone apps and direct imports for micro-frontends—while maintaining createWebHashHistory routing.

Related Skills

Explore More Software Engineering Skills→
okgoogle13okgoogle13
1

react-page-scaffolder

Scaffold React page directories with MUI layout and export barrels.

Community
Basic
NKDShinKuNKDShinKu

vue-router-best-practices

Implement Vue Router 4 navigation guards in Vue 3 projects.

Community
Advanced
cslsoftwarescslsoftwares

developer-vuejs-routing-state

Configure Vue Router and Pinia with guards and lazy loading.

Community
Intermediate
PMKhaiPMKhai

mfe-pattern

Expose and orchestrate micro frontends via window surface and hash-based routing.

Community
Advanced