-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathAttributeRouting.razor
More file actions
130 lines (117 loc) · 9.32 KB
/
Copy pathAttributeRouting.razor
File metadata and controls
130 lines (117 loc) · 9.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<div class="max-w-7xl mx-auto px-4 py-8">
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">Attribute-Based Routing</h1>
<div class="bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-200 dark:border-blue-800 rounded-xl p-6 mb-8">
<h4 class="text-xl font-semibold text-blue-900 dark:text-blue-100 mb-3">✨ Declarative Route Configuration</h4>
<p class="text-blue-800 dark:text-blue-200 mb-0">
Blazouter supports attribute-based routing, allowing you to configure routes using attributes directly on your components
instead of programmatic configuration. This approach is more intuitive, keeps configuration co-located with components,
and can be freely mixed with traditional programmatic routes.
</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
<div class="p-6">
<h5 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">This Page Configuration</h5>
<p class="text-gray-600 dark:text-gray-400 mb-4">This component uses the following attributes:</p>
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 font-mono text-sm mb-4">
<div class="text-gray-800 dark:text-gray-200">[<span class="text-blue-600 dark:text-blue-400">RouteExact</span>(<span class="text-purple-600 dark:text-purple-400">true</span>)]</div>
<div class="text-gray-800 dark:text-gray-200">[<span class="text-blue-600 dark:text-blue-400">Route</span>(<span class="text-orange-600 dark:text-orange-400">"/attribute-examples"</span>)]</div>
<div class="text-gray-800 dark:text-gray-200">[<span class="text-blue-600 dark:text-blue-400">RouteTitle</span>(<span class="text-orange-600 dark:text-orange-400">"Attribute Example"</span>)]</div>
<div class="text-gray-800 dark:text-gray-200">[<span class="text-blue-600 dark:text-blue-400">RouteData</span>(<span class="text-orange-600 dark:text-orange-400">"Section"</span>, <span class="text-orange-600 dark:text-orange-400">"Admin"</span>)]</div>
<div class="text-gray-800 dark:text-gray-200">[<span class="text-blue-600 dark:text-blue-400">RouteGuard</span>(<span class="text-purple-600 dark:text-purple-400">typeof</span>(AuthenticationGuard))]</div>
<div class="text-gray-800 dark:text-gray-200">[<span class="text-blue-600 dark:text-blue-400">RouteTransition</span>(RouteTransition.<span class="text-purple-600 dark:text-purple-400">Fade</span>)]</div>
</div>
<div class="bg-indigo-50 dark:bg-indigo-900/20 border-2 border-indigo-200 dark:border-indigo-800 rounded-lg p-4">
<h6 class="font-semibold text-indigo-900 dark:text-indigo-100 mb-2">Route Information:</h6>
<dl class="space-y-2">
<div class="flex">
<dt class="font-semibold text-indigo-700 dark:text-indigo-300 w-32">Title:</dt>
<dd class="text-indigo-900 dark:text-indigo-100">@RouteTitle</dd>
</div>
<div class="flex">
<dt class="font-semibold text-indigo-700 dark:text-indigo-300 w-32">Section:</dt>
<dd class="text-indigo-900 dark:text-indigo-100">@Section</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
<div class="p-6">
<h5 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">📚 Interactive Examples</h5>
<p class="text-gray-600 dark:text-gray-400 mb-6">
Explore these detailed examples to learn how to use each attribute routing feature:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/basic")'
class="p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-2 border-blue-200 dark:border-blue-800 rounded-lg hover:from-blue-100 hover:to-blue-200 dark:hover:from-blue-800/30 dark:hover:to-blue-700/30 transition-all text-left">
<h6 class="font-semibold text-blue-900 dark:text-blue-100 mb-2">1️⃣ Basic Routing</h6>
<p class="text-sm text-blue-700 dark:text-blue-300">Simple route path and title configuration</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/user/123/post/456")'
class="p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-2 border-green-200 dark:border-green-800 rounded-lg hover:from-green-100 hover:to-green-200 dark:hover:from-green-800/30 dark:hover:to-green-700/30 transition-all text-left">
<h6 class="font-semibold text-green-900 dark:text-green-100 mb-2">2️⃣ Dynamic Parameters</h6>
<p class="text-sm text-green-700 dark:text-green-300">URL parameters with :paramName syntax</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/transitions")'
class="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border-2 border-purple-200 dark:border-purple-800 rounded-lg hover:from-purple-100 hover:to-purple-200 dark:hover:from-purple-800/30 dark:hover:to-purple-700/30 transition-all text-left">
<h6 class="font-semibold text-purple-900 dark:text-purple-100 mb-2">3️⃣ Route Transitions</h6>
<p class="text-sm text-purple-700 dark:text-purple-300">Animated page transitions</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/guards")'
class="p-4 bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 border-2 border-orange-200 dark:border-orange-800 rounded-lg hover:from-orange-100 hover:to-orange-200 dark:hover:from-orange-800/30 dark:hover:to-orange-700/30 transition-all text-left">
<h6 class="font-semibold text-orange-900 dark:text-orange-100 mb-2">4️⃣ Route Guards</h6>
<p class="text-sm text-orange-700 dark:text-orange-300">Authentication and authorization</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/middleware")'
class="p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border-2 border-indigo-200 dark:border-indigo-800 rounded-lg hover:from-indigo-100 hover:to-indigo-200 dark:hover:from-indigo-800/30 dark:hover:to-indigo-700/30 transition-all text-left">
<h6 class="font-semibold text-indigo-900 dark:text-indigo-100 mb-2">5️⃣ Route Middleware</h6>
<p class="text-sm text-indigo-700 dark:text-indigo-300">Cross-cutting concerns and data preloading</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/custom-data")'
class="p-4 bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 border-2 border-pink-200 dark:border-pink-800 rounded-lg hover:from-pink-100 hover:to-pink-200 dark:hover:from-pink-800/30 dark:hover:to-pink-700/30 transition-all text-left">
<h6 class="font-semibold text-pink-900 dark:text-pink-100 mb-2">6️⃣ Custom Data</h6>
<p class="text-sm text-pink-700 dark:text-pink-300">Attach metadata to routes</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/old-path")'
class="p-4 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 border-2 border-red-200 dark:border-red-800 rounded-lg hover:from-red-100 hover:to-red-200 dark:hover:from-red-800/30 dark:hover:to-red-700/30 transition-all text-left">
<h6 class="font-semibold text-red-900 dark:text-red-100 mb-2">7️⃣ Redirects</h6>
<p class="text-sm text-red-700 dark:text-red-300">Automatic route redirection</p>
</button>
<button @onclick='() => NavigationService.NavigateTo("/attribute-examples/cache")'
class="p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900/20 dark:to-cyan-800/20 border-2 border-cyan-200 dark:border-cyan-800 rounded-lg hover:from-cyan-100 hover:to-cyan-200 dark:hover:from-cyan-800/30 dark:hover:to-cyan-700/30 transition-all text-left">
<h6 class="font-semibold text-cyan-900 dark:text-cyan-100 mb-2">8️⃣ Route Caching</h6>
<p class="text-sm text-cyan-700 dark:text-cyan-300">Control per-route cache behavior</p>
</button>
</div>
</div>
</div>
<div class="bg-green-50 dark:bg-green-900/20 border-2 border-green-200 dark:border-green-800 rounded-xl p-6">
<h5 class="text-xl font-semibold text-green-900 dark:text-green-100 mb-4">✅ Benefits of Attribute-Based Routing</h5>
<div class="grid md:grid-cols-2 gap-4 text-green-800 dark:text-green-200">
<div class="flex items-start">
<span class="mr-2">✓</span>
<div><strong>Declarative:</strong> Clear, easy-to-read syntax</div>
</div>
<div class="flex items-start">
<span class="mr-2">✓</span>
<div><strong>Co-located:</strong> Configuration next to component</div>
</div>
<div class="flex items-start">
<span class="mr-2">✓</span>
<div><strong>Intuitive:</strong> Easier to understand and maintain</div>
</div>
<div class="flex items-start">
<span class="mr-2">✓</span>
<div><strong>Flexible:</strong> Mix with programmatic routes</div>
</div>
<div class="flex items-start">
<span class="mr-2">✓</span>
<div><strong>Compatible:</strong> Fully backward compatible</div>
</div>
<div class="flex items-start">
<span class="mr-2">✓</span>
<div><strong>Complete:</strong> 92% feature coverage (11/12 properties)</div>
</div>
</div>
</div>
</div>