0
# Vue Router
1
2
Vue Router is the official client-side routing library for Vue.js 2, providing a comprehensive solution for building single-page applications with declarative route configuration, nested routes, programmatic navigation, and advanced features like route guards, lazy loading, and transition effects.
3
4
## Package Information
5
6
- **Package Name**: vue-router
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install vue-router`
10
11
## Core Imports
12
13
```javascript
14
import VueRouter from 'vue-router';
15
import { RouterLink, RouterView, NavigationFailureType, isNavigationFailure, START_LOCATION } from 'vue-router';
16
```
17
18
For CommonJS:
19
20
```javascript
21
const VueRouter = require('vue-router');
22
// RouterLink and RouterView are registered as global components when Vue.use(VueRouter) is called
23
```
24
25
For Composition API (Vue 2.7+):
26
27
```javascript
28
import { useRouter, useRoute } from 'vue-router/composables';
29
```
30
31
## Basic Usage
32
33
```javascript
34
import Vue from 'vue';
35
import VueRouter from 'vue-router';
36
import Home from './components/Home.vue';
37
import About from './components/About.vue';
38
39
Vue.use(VueRouter);
40
41
// Define routes
42
const routes = [
43
{ path: '/', component: Home },
44
{ path: '/about', component: About }
45
];
46
47
// Create router instance
48
const router = new VueRouter({
49
mode: 'history',
50
routes
51
});
52
53
// Create and mount root instance
54
new Vue({
55
router,
56
render: h => h(App)
57
}).$mount('#app');
58
```
59
60
## Architecture
61
62
Vue Router is built around several key components:
63
64
- **VueRouter Class**: Central router instance managing navigation and route matching
65
- **Route Configuration**: Declarative route definitions with support for nesting and dynamic parameters
66
- **Navigation Guards**: Hooks for controlling access and lifecycle during route transitions
67
- **Built-in Components**: RouterLink and RouterView for declarative navigation and view rendering
68
- **History Management**: Abstraction over browser history with multiple modes (hash, history, abstract)
69
- **Composition API**: Vue 3-style composables for use with Vue 2.7+ composition API
70
71
## Capabilities
72
73
### Router Instance Management
74
75
Core router functionality for navigation, route matching, and configuration management.
76
77
```javascript { .api }
78
class VueRouter {
79
constructor(options?: RouterOptions);
80
push(location: RawLocation): Promise<Route>;
81
replace(location: RawLocation): Promise<Route>;
82
go(n: number): void;
83
back(): void;
84
forward(): void;
85
}
86
```
87
88
[Router Instance](./router-instance.md)
89
90
### Route Configuration
91
92
Route definition system supporting nested routes, dynamic parameters, and route-level configuration.
93
94
```javascript { .api }
95
interface RouteConfig {
96
path: string;
97
component?: Component;
98
name?: string;
99
children?: RouteConfig[];
100
redirect?: RedirectOption;
101
meta?: RouteMeta;
102
}
103
104
interface RouterOptions {
105
routes?: RouteConfig[];
106
mode?: 'hash' | 'history' | 'abstract';
107
base?: string;
108
}
109
```
110
111
[Route Configuration](./route-configuration.md)
112
113
### Navigation Guards
114
115
Comprehensive guard system for controlling route transitions with global, per-route, and component-level hooks.
116
117
```javascript { .api }
118
type NavigationGuard = (to: Route, from: Route, next: NavigationGuardNext) => any;
119
120
beforeEach(guard: NavigationGuard): () => void;
121
beforeResolve(guard: NavigationGuard): () => void;
122
afterEach(hook: (to: Route, from: Route) => any): () => void;
123
```
124
125
[Navigation Guards](./navigation-guards.md)
126
127
### Built-in Components
128
129
RouterLink and RouterView components for declarative navigation and route rendering.
130
131
```javascript { .api }
132
interface RouterLinkProps {
133
to: string | Location;
134
replace?: boolean;
135
append?: boolean;
136
tag?: string;
137
}
138
139
interface RouterViewProps {
140
name?: string;
141
}
142
```
143
144
[Built-in Components](./components.md)
145
146
### Composition API
147
148
Vue 3-style composables for accessing router functionality in composition API components.
149
150
```javascript { .api }
151
function useRouter(): VueRouter;
152
function useRoute(): Route;
153
function onBeforeRouteUpdate(guard: NavigationGuard): void;
154
function onBeforeRouteLeave(guard: NavigationGuard): void;
155
```
156
157
[Composition API](./composables.md)
158
159
## Core Types
160
161
```javascript { .api }
162
interface Route {
163
path: string;
164
name?: string | null;
165
hash: string;
166
query: Dictionary<string | (string | null)[]>;
167
params: Dictionary<string>;
168
fullPath: string;
169
matched: RouteRecord[];
170
meta?: RouteMeta;
171
}
172
173
interface Location {
174
name?: string;
175
path?: string;
176
hash?: string;
177
query?: Dictionary<string | (string | null)[] | null | undefined>;
178
params?: Dictionary<string>;
179
append?: boolean;
180
replace?: boolean;
181
}
182
183
type RawLocation = string | Location;
184
type Dictionary<T> = { [key: string]: T };
185
```