This component provides routing functionality for web applications with URL integration and nested routing
capabilities.
It consists of two parts: ars-page for content routing and
ars-page-controller for navigation controls.
🔍 Current Status
Current Page:Loading...
Current Route:Loading...
Available Pages:Loading...
🎯 URL Integration Demo
📊 Dashboard
Overview of your trading system performance
Total Profit
$12,450
+15.3% this month
Active Bots
8
3 running, 5 paused
Success Rate
87.2%
Last 30 days
Total Trades
1,247
This month
💡 URL Integration
Notice how the URL changes when you navigate between pages. Try using the browser's back and
forward buttons!
Current URL:
🤖 Bots
Manage your automated trading bots
Total Bots
12
8 active, 4 inactive
Running Time
247h
Average per bot
🤖 Bot Management
This page demonstrates how the router handles different page IDs and updates the URL accordingly.
🎮 Simulation
Test your trading strategies in a safe environment
🎮 Simulation Mode
Run your trading strategies against historical data to see how they would have performed.
📈 Analytics
Deep dive into your trading performance
📈 Performance Analytics
Advanced charts and metrics to help you understand your trading performance.
⚙️ Configs
System configuration and settings
⚙️ System Configuration
Global system settings and configuration options.
🔧 Settings
System configuration and preferences
🔧 Settings Section
This page is shown when navigating to any settings route. The specific content would be
determined by the route.
📄 Current Route Content
Loading route content...
Current Route Information
Loading...
🧪 Demo Controls
✨ Features
🌐 URL Integration
Automatically updates browser URL when navigating between pages with full browser history support.
🔄 Nested Routes
Support for complex route hierarchies with parent-child relationships for advanced applications.
🎯 Dual Navigation
Support for both page-based navigation (data-page) and route-based navigation (data-route).
📱 Browser History
Full support for browser back/forward buttons and proper history state management.
⚡ Web Component Base
Extends WebComponentBase for enhanced attribute handling and better integration.
🎨 Event-Driven
Custom events for page changes and navigation with comprehensive event details.
📖 Implementation Guide
Basic Usage:
HTML Structure: Create your page router with routes configuration and add navigation
controls.
Dashboard content
Settings content
JavaScript Usage:
Programmatic Navigation: Use the router methods to navigate programmatically.
const router = document.querySelector('#my-router');
// Navigate by page ID
router.showPage('dashboard');
// Navigate by route
router.navigateToRoute('/settings/system-config');
// Get current information
const pageInfo = router.getPageInfo();
const routeInfo = router.getCurrentRoute();
Event Handling:
Listen for page changes: The router fires custom events when pages change.