0
# Navigation Management
1

2
Programmatic navigation APIs with Ionic-specific features like animations, directions, and tab handling. These methods are available through the injected `navManager` provider in Vue components.
3

4
## Accessing Navigation Manager
5

6
```typescript
7
import { inject } from 'vue';
8

9
export default {
10
  setup() {
11
    const navManager = inject('navManager');
12
    // Use navigation methods...
13
  }
14
}
15
```
16

17
## Capabilities
18

19
### Programmatic Navigation
20

21
Navigate to a specific route with Ionic-specific parameters.
22

23
```typescript { .api }
24
/**
25
 * Navigate to a specific route with Ionic-specific parameters
26
 * @param path - Route path or location to navigate to
27
 * @param routerAction - Type of navigation action (default: "push") 
28
 * @param routerDirection - Animation direction for navigation (default: "forward")
29
 * @param routerAnimation - Custom animation builder for transitions
30
 * @param tab - Tab context for the navigation
31
 */
32
handleNavigate(
33
  path: RouteLocationRaw,
34
  routerAction?: RouteAction,
35
  routerDirection?: RouteDirection,
36
  routerAnimation?: AnimationBuilder,
37
  tab?: string
38
): void;
39
```
40

41
**Usage Examples:**
42

43
```typescript
44
// Basic navigation
45
navManager.handleNavigate('/profile');
46

47
// Navigation with direction and animation
48
navManager.handleNavigate('/settings', 'push', 'forward');
49

50
// Replace current route
51
navManager.handleNavigate('/login', 'replace', 'root');
52

53
// Tab-aware navigation
54
navManager.handleNavigate('/tabs/discover', 'push', 'forward', undefined, 'discover');
55
```
56

57
### Navigate Back
58

59
Handle backward navigation with support for default fallback routes.
60

61
```typescript { .api }
62
/**
63
 * Handle backward navigation with optional fallback route
64
 * @param defaultHref - Fallback route if no back history exists
65
 * @param routerAnimation - Custom animation for back navigation
66
 */
67
handleNavigateBack(defaultHref?: string, routerAnimation?: AnimationBuilder): void;
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
// Simple back navigation
74
navManager.handleNavigateBack();
75

76
// Back navigation with fallback
77
navManager.handleNavigateBack('/home');
78

79
// Back navigation with custom animation
80
navManager.handleNavigateBack('/home', customSlideAnimation);
81
```
82

83
### External Navigation
84

85
Navigate using external navigation options object.
86

87
```typescript { .api }
88
/**
89
 * Navigate using external navigation options
90
 * @param navigationOptions - Object containing navigation parameters
91
 */
92
navigate(navigationOptions: ExternalNavigationOptions): void;
93

94
interface ExternalNavigationOptions {
95
  routerLink: string;
96
  routerDirection?: RouteDirection;
97
  routerAnimation?: AnimationBuilder;
98
  routerAction?: RouteAction;
99
}
100
```
101

102
**Usage Example:**
103

104
```typescript
105
navManager.navigate({
106
  routerLink: '/profile',
107
  routerDirection: 'forward',
108
  routerAction: 'push'
109
});
110
```
111

112
### Get Current Route Information
113

114
Retrieve information about the current route including navigation context.
115

116
```typescript { .api }
117
/**
118
 * Get current route information with navigation context
119
 * @returns Current route information object
120
 */
121
getCurrentRouteInfo(): RouteInfo;
122
```
123

124
### Get Leaving Route Information
125

126
Get information about the route being left during navigation.
127

128
```typescript { .api }
129
/**
130
 * Get information about the route being left during navigation
131
 * @returns Route information for the leaving route
132
 */
133
getLeavingRouteInfo(): RouteInfo;
134
```
135

136
### Check Navigation History
137

138
Determine if backward navigation is possible.
139

140
```typescript { .api }
141
/**
142
 * Check if backward navigation is possible
143
 * @param deep - Number of steps to check back (default: 1)
144
 * @returns True if back navigation is possible
145
 */
146
canGoBack(deep?: number): boolean;
147
```
148

149
**Usage Examples:**
150

151
```typescript
152
// Check if can go back one step
153
if (navManager.canGoBack()) {
154
  navManager.handleNavigateBack();
155
}
156

157
// Check if can go back multiple steps
158
if (navManager.canGoBack(3)) {
159
  // Can go back 3 steps
160
}
161
```
162

163
### Browser History Navigation
164

165
Navigate using browser history with Ionic animations.
166

167
```typescript { .api }
168
/**
169
 * Navigate backward in browser history with optional animation
170
 * @param routerAnimation - Custom animation for back navigation
171
 */
172
goBack(routerAnimation?: AnimationBuilder): void;
173

174
/**
175
 * Navigate forward in browser history with optional animation  
176
 * @param routerAnimation - Custom animation for forward navigation
177
 */
178
goForward(routerAnimation?: AnimationBuilder): void;
179
```
180

181
**Usage Examples:**
182

183
```typescript
184
// Basic browser back
185
navManager.goBack();
186

187
// Browser back with custom animation
188
navManager.goBack(customSlideAnimation);
189

190
// Browser forward
191
navManager.goForward();
192
```
193

194
### Tab Management
195

196
Manage tab-based navigation including tab switching and resetting.
197

198
```typescript { .api }
199
/**
200
 * Reset a tab to its initial route
201
 * @param tab - Tab identifier to reset
202
 */
203
resetTab(tab: string): void;
204

205
/**
206
 * Change to a different tab with optional specific path
207
 * @param tab - Tab identifier to switch to
208
 * @param path - Optional specific path within the tab
209
 */
210
changeTab(tab: string, path?: string): void;
211

212
/**
213
 * Set the current tab context for route information
214
 * @param tab - Tab identifier to set as current
215
 */
216
handleSetCurrentTab(tab: string): void;
217
```
218

219
**Usage Examples:**
220

221
```typescript
222
// Reset tab to initial route
223
navManager.resetTab('discover');
224

225
// Switch to tab at specific path
226
navManager.changeTab('profile', '/tabs/profile/settings');
227

228
// Set current tab context
229
navManager.handleSetCurrentTab('home');
230
```
231

232
### History Change Listener
233

234
Register a callback to listen for navigation history changes.
235

236
```typescript { .api }
237
/**
238
 * Register a callback for history change events
239
 * @param callback - Function to call when history changes
240
 */
241
registerHistoryChangeListener(callback: (routeInfo: RouteInfo) => void): void;
242
```
243

244
**Usage Example:**
245

246
```typescript
247
navManager.registerHistoryChangeListener((routeInfo) => {
248
  console.log('Navigation changed:', routeInfo.pathname);
249
});
250
```