0
# Router Creation
1

2
Core router factory function and history utilities that create an enhanced Vue Router instance with Ionic navigation capabilities.
3

4
## Capabilities
5

6
### Router Factory
7

8
Creates an enhanced Vue Router instance with Ionic-specific navigation features.
9

10
```typescript { .api }
11
/**
12
 * Creates an enhanced Vue Router instance with Ionic navigation capabilities
13
 * @param opts - Ionic Vue Router options extending standard RouterOptions
14
 * @returns Enhanced Router instance with Ionic navigation features
15
 */
16
function createRouter(opts: IonicVueRouterOptions): Router;
17

18
interface IonicVueRouterOptions extends RouterOptions {
19
  /** 
20
   * Optional prefix for tab-based routes. When set, routes starting with this prefix
21
   * will be treated as tab routes for navigation context
22
   */
23
  tabsPrefix?: string;
24
}
25
```
26

27
The returned router extends the standard Vue Router with additional providers:
28
- `navManager`: Navigation manager for programmatic navigation
29
- `viewStacks`: View stack management for complex navigation scenarios
30

31
**Usage Examples:**
32

33
```typescript
34
import { createRouter, createWebHistory } from "@ionic/vue-router";
35

36
// Basic router creation
37
const router = createRouter({
38
  history: createWebHistory(),
39
  routes: [
40
    { path: '/', component: Home },
41
    { path: '/profile', component: Profile }
42
  ]
43
});
44

45
// Router with tab support
46
const tabRouter = createRouter({
47
  history: createWebHistory(),
48
  routes: [
49
    { path: '/', component: Home },
50
    { path: '/tabs/discover', component: Discover },
51
    { path: '/tabs/profile', component: Profile }
52
  ],
53
  tabsPrefix: '/tabs/' // Routes starting with /tabs/ treated as tab routes
54
});
55
```
56

57
### Web History
58

59
Creates web history for browser-based navigation using HTML5 History API.
60

61
```typescript { .api }
62
/**
63
 * Creates web history for the router using HTML5 History API
64
 * @param base - Optional base path for the application
65
 * @returns History instance for web applications
66
 */
67
function createWebHistory(base?: string): RouterHistory;
68
```
69

70
**Usage Example:**
71

72
```typescript
73
import { createRouter, createWebHistory } from "@ionic/vue-router";
74

75
const router = createRouter({
76
  history: createWebHistory('/app/'), // Base path for app
77
  routes: [...routes]
78
});
79
```
80

81
### Web Hash History
82

83
Creates hash-based history for applications that cannot use HTML5 History API.
84

85
```typescript { .api }
86
/**
87
 * Creates web hash history for the router using URL hash
88
 * @param base - Optional base path for the application  
89
 * @returns History instance using hash-based navigation
90
 */
91
function createWebHashHistory(base?: string): RouterHistory;
92
```
93

94
**Usage Example:**
95

96
```typescript
97
import { createRouter, createWebHashHistory } from "@ionic/vue-router";
98

99
const router = createRouter({
100
  history: createWebHashHistory(), // Uses # in URLs
101
  routes: [...routes]
102
});
103
```
104

105
### Memory History
106

107
Creates memory-based history for server-side rendering or testing environments.
108

109
```typescript { .api }
110
/**
111
 * Creates memory history for the router (no browser history)
112
 * @param base - Optional base path for the application
113
 * @returns History instance stored in memory
114
 */
115
function createMemoryHistory(base?: string): RouterHistory;
116
```
117

118
**Usage Example:**
119

120
```typescript
121
import { createRouter, createMemoryHistory } from "@ionic/vue-router";
122

123
const router = createRouter({
124
  history: createMemoryHistory(), // For SSR or tests
125
  routes: [...routes]
126
});
127
```