What is Hierarchical Mode?

In hierarchical mode, child routes automatically inherit metadata from parent routes based on their path structure. For example, /documents/:id/logs will inherit from /documents/:id, which in turn inherits from /documents.

What Gets Inherited

  • Breadcrumbs - Concatenated from parent to child (additive)
  • Permissions - Parent and child checks both execute (cumulative AND)
  • Conditions - Parent conditions run before child conditions
  • Authorization Callbacks - Parent callbacks execute before child callbacks

Enabling Hierarchical Mode

Enable hierarchical routes in your main.js before mounting the app:

 
 
Basic Example
 
With hierarchical mode enabled, define parent and child routes with shared metadata:
 
 
 
 
Permission Inheritance
 
Permissions work like filesystem security - users must pass all permission checks
    in the hierarchy (cumulative AND behavior). This matches how Linux/Windows handle nested directory access.
 
 
 
  
Authorization Callback Chaining
 
Authorization callbacks also chain from parent to child, enabling both role-based
    and resource-based access control at multiple levels:
 
 
 
 
Opting Out of Inheritance
 
Use inheritance flags to selectively break the inheritance chain for specific routes:
 
 
 
 
When to Use Hierarchical Mode
 
✅ Good Use Cases
 
  • Deep route structures with natural parent-child relationships
    •  
  • Shared security requirements across route families
    •  
  • Complex breadcrumb trails that follow route hierarchy
    •  
  • DRY (Don't Repeat Yourself) route definitions
 
❌ When to Use Flat Mode (Default)
 
  • Routes are independent with no hierarchical relationship
    •  
  • You prefer explicit, visible metadata in each route
    •  
  • Route security requirements don't follow parent-child patterns
    •  
  • Simpler applications with shallow route structures
 
Comparison: Flat vs Hierarchical
 
Flat Mode (Default)
 
 
 
 
Hierarchical Mode
 
 
 
 
Implementation Details
 
Parent Discovery
 
Parent routes are discovered automatically by path matching. The router finds the longest
    matching parent path:
 
  • /documents/:id/logs → parent: /documents/:id
    •  
  • /documents/:id → parent: /documents
    •  
  • /documents → no parent (root of hierarchy)
 
Circular Reference Protection
 
The router includes built-in circular reference detection to prevent infinite loops
    if routes accidentally reference each other.
 
Performance
 
Parent discovery happens once during route setup, not on every navigation. The performance
    impact is negligible even for large route hierarchies.
 
See Also