Edge 12+, FF 36+, Chrome 49+, or use translation from ES2105 to ES5
vue-h-router
is the small router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include:
- Lightweight: 2kb of sources
- No dependencies
- Modular, component-based router configuration
- Route params
- Hash mode navigation
- HTML5 history support
- Route hooks
npm install vue-h-router
import Vue from 'vue';
import router from 'vue-h-router';
Vue.use(router);
const HomeView = {
template: '<div>Home</div>'
};
const LoginView = {
template: '<div>Login</div>'
};
const user = {
authorized: true,
logout() {
return fetch('backend/logout');
}
};
const checkAuth = () => {
return user.authorized ? Promise.resolve() : Promise.reject();
};
const checkNotAuth = () => {
return !user.authorized ? Promise.resolve() : Promise.reject();
};
router.init([
{
url: '/home',
component: HomeView,
before: checkAuth
},
{
url: '/login',
component: LoginView,
before: checkNotAuth
},
{
url: '/logout',
redirect() {
return user.logout()
.then(() => {
user.authorized = false;
return '/login';
});
}
},
{
url: '.*',
redirect() {
return Promise.resolve(user.authorized ? '/home' : '/login')
}
}
]);
const app = new Vue({
template: `
<div class="main">
<component :is="$route.component"/>
</div>
`,
el: '#app'
});
The router instance can be found in inside components as this.$router.
Adds a list of routes to router and immediately applies it to the current page url.
import Vue from 'vue';
import router from 'vue-h-router';
Vue.use(router);
const Home = {
template: '<div>Home content</div>'
};
router.init([
{
url: '/home',
component: Home
},
{
url: /.*/,
redirect: '/home'
}
]);
- type:
Route
The current route represented as a Route Object.
- type:
String
orRegExp
If url is string, then it converts to RegExp:
router.init([
{
url: '.*', // converts to /^.*$/
component: {}
}
]);
You can match arguments from url by using parentheses:
router.init([
{
url: /^\/department\/(it|cleaning)\/user\/(\d+)$/,
component: {}
}
]);
location.hash = '/department/it/user/21';
// router.route.args is ['it', '21'];
- type:
Vue Component
- type:
String
Applies immediately when route matched. Current route is not saved in the history.
location.hash = '/about';
router.init([
{
url: '/home',
component: {}
},
{
url: '/about',
component: {}
},
{
url: '.*',
redirect: '/home'
}
]);
// history is empty
// current url is /about
location.hash = '/not/existed/page';
// history like ['/about']
// current url is /home
- return
Promise
If promise resolved then redirect applies. If promise rejected then current navigation was aborted.
- return
Promise
If promise resolved then redirect applies. If promise rejected then router tries to find next matching route.
Called after current route applies.
Router searches for the route in the order in which they appear in the list.
A route object represents the state of the current active route. It contains parsed information of the current URL
The route object is immutable. Every successful navigation will result in a fresh route object.
The route object can be found in multiple places:
- Inside components as this.$route
- Inside router as router.route
- Inside redirect function:
- redirect(newRoute)
- Inside navigation hooks:
- before(newRoute)
- after(oldRoute, newRoute)
- type:
String
The full resolved URL including query.
- type:
Array
The list of dynamic segments values.
- type:
Vue Component
The Vue component corresponding to the current route.