0
# Types and Interfaces
1

2
Complete TypeScript type definitions for all router functionality including route information, navigation parameters, and view management.
3

4
## Core Types
5

6
### Router Options
7

8
Configuration options for creating an Ionic Vue Router.
9

10
```typescript { .api }
11
interface IonicVueRouterOptions extends RouterOptions {
12
  /** 
13
   * Optional prefix for tab-based routes. When set, routes starting with this prefix
14
   * will be treated as tab routes for navigation context
15
   */
16
  tabsPrefix?: string;
17
}
18
```
19

20
### Route Actions and Directions
21

22
Type definitions for navigation actions and directions.
23

24
```typescript { .api }
25
/**
26
 * Type of router action being performed
27
 */
28
type RouteAction = "push" | "pop" | "replace";
29

30
/**
31
 * Direction of navigation for animations and transitions
32
 */
33
type RouteDirection = "forward" | "back" | "root" | "none";
34
```
35

36
## Route Information
37

38
### RouteInfo Interface
39

40
Comprehensive information about a route including navigation context.
41

42
```typescript { .api }
43
interface RouteInfo {
44
  /** Unique identifier for the route instance */
45
  id?: string;
46
  
47
  /** Type of navigation action that brought us to this route */
48
  routerAction?: RouteAction;
49
  
50
  /** Direction of navigation for animations */
51
  routerDirection?: RouteDirection;
52
  
53
  /** Custom animation builder for transitions */
54
  routerAnimation?: AnimationBuilder;
55
  
56
  /** Current route pathname */
57
  pathname?: string;
58
  
59
  /** Query string parameters */
60
  search?: string;
61
  
62
  /** Route parameters object */
63
  params?: { [k: string]: any };
64
  
65
  /** 
66
   * The previous route you were on if you were to navigate backwards 
67
   * in a linear manner (i.e., browser back button)
68
   */
69
  lastPathname?: string;
70
  
71
  /** Last pathname of the previous route */
72
  prevRouteLastPathname?: string;
73
  
74
  /** 
75
   * The route that pushed the current route, used to determine if a route 
76
   * can swipe to go back to a previous route
77
   */
78
  pushedByRoute?: string;
79
  
80
  /** Tab context for the route */
81
  tab?: string;
82
  
83
  /** Position in browser history */
84
  position?: number;
85
  
86
  /** History delta for navigation */
87
  delta?: number;
88
}
89
```
90

91
### Route Parameters
92

93
Parameters for programmatic navigation.
94

95
```typescript { .api }
96
interface RouteParams {
97
  /** Type of navigation action to perform */
98
  routerAction: RouteAction;
99
  
100
  /** Direction of navigation */
101
  routerDirection: RouteDirection;
102
  
103
  /** Optional custom animation builder */
104
  routerAnimation?: AnimationBuilder;
105
  
106
  /** Optional tab context */
107
  tab?: string;
108
  
109
  /** Optional route identifier */
110
  id?: string;
111
}
112
```
113

114
### External Navigation Options
115

116
Options for external navigation calls.
117

118
```typescript { .api }
119
interface ExternalNavigationOptions {
120
  /** Route path to navigate to */
121
  routerLink: string;
122
  
123
  /** Optional navigation direction */
124
  routerDirection?: RouteDirection;
125
  
126
  /** Optional custom animation */
127
  routerAnimation?: AnimationBuilder;
128
  
129
  /** Optional navigation action */
130
  routerAction?: RouteAction;
131
}
132
```
133

134
### Navigation Information
135

136
Information about current navigation state.
137

138
```typescript { .api }
139
interface NavigationInformation {
140
  /** Current navigation action */
141
  action?: RouteAction;
142
  
143
  /** Current navigation direction */
144
  direction?: RouteDirection;
145
  
146
  /** History delta for the navigation */
147
  delta?: number;
148
}
149
```
150

151
## View Management Types
152

153
### ViewItem Interface
154

155
Represents a view in the navigation stack with component data.
156

157
```typescript { .api }
158
interface ViewItem {
159
  /** Unique identifier for the view */
160
  id: string;
161
  
162
  /** Pathname for the view */
163
  pathname: string;
164
  
165
  /** Outlet identifier for the view */
166
  outletId: number;
167
  
168
  /** Matched route from Vue Router */
169
  matchedRoute: RouteLocationMatched;
170
  
171
  /** Optional ion-page HTML element */
172
  ionPageElement?: HTMLElement;
173
  
174
  /** Vue component instance */
175
  vueComponent: any;
176
  
177
  /** Whether this is an Ionic route */
178
  ionRoute: boolean;
179
  
180
  /** Whether the view should be mounted */
181
  mount: boolean;
182
  
183
  /** Whether this is an exact route match */
184
  exact: boolean;
185
  
186
  /** Optional callback for view registration */
187
  registerCallback?: () => void;
188
  
189
  /** Vue component reference */
190
  vueComponentRef: Ref;
191
  
192
  /** Route parameters */
193
  params?: { [k: string]: any };
194
  
195
  /** Vue component data cache */
196
  vueComponentData: VueComponentData;
197
  
198
  /** Optional animation for the view */
199
  routerAnimation?: AnimationBuilder;
200
}
201
```
202

203
### View Stacks
204

205
Collection of view stacks keyed by outlet ID.
206

207
```typescript { .api }
208
interface ViewStacks {
209
  [k: string]: ViewItem[];
210
}
211
```
212

213
### Vue Component Data
214

215
Cached data for Vue components in views.
216

217
```typescript { .api }
218
interface VueComponentData {
219
  /**
220
   * The cached result of the props function for a particular view instance
221
   */
222
  propsFunctionResult?: any;
223
}
224
```
225

226
## Import Types
227

228
These types are re-exported from dependencies for convenience:
229

230
```typescript { .api }
231
// From @ionic/vue
232
type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
233

234
// From vue
235
type Ref<T = any> = { value: T };
236

237
// From vue-router  
238
type RouteLocationRaw = string | RouteLocationNamedRaw | RouteLocationPathRaw;
239
type RouteLocationMatched = RouteRecordNormalized & { components?: Record<string, Component> };
240
type RouterOptions = { history: RouterHistory; routes: RouteRecordRaw[]; [key: string]: any };
241
type RouterHistory = { base: string; location: string; [key: string]: any };
242
```
243

244
**Note**: These dependency types are used by @ionic/vue-router but are not directly exported. Import them from their respective packages:
245

246
```typescript
247
import type { RouteLocationRaw, RouterOptions } from 'vue-router';
248
import type { AnimationBuilder } from '@ionic/vue';
249
import type { Ref } from 'vue';
250
```