Routing directive for Vue.js (v0.11), inspired by ng-view.
Based on v-component thus benefits from v-transition, keep-alive, wait-for, transition-mode.
Allows you to declare your routes on the $root Vue object:
var root = new Vue({
el: 'body',
routes: {
'/home': {
componentId: 'fg-home',
isDefault: true
},
'/work/:work': {
componentId: 'fg-work',
afterUpdate: 'updateHeader',
data: {
defaultColor: '#3453DD'
}
},
options: {
hashbang: true
}
}
});With minimal markup:
<body>
<div v-route></div>
</body>vue-route extends the v-component directive by @yyx990803 (on the vuejs repo). Buy him a coffee if you can.
1. Install with npm/component(1): npm i vue-route --save or component install ayamflow/vue-route.
2. Require and install the plugin:
var Vue = require('vue'),
route = require('vue-route');
Vue.use(route); // BOOM3. Put the <div v-route></div> in your main template.
4. Pass your routes to the $root VM of you app (see example above).
5. Profit !
- Routes definition: when you pass your routes to the
$root, you can pass several properties:componentId: the Vue.component id for the associated template/VM.beforeUpdate: a callback (method or name of method on the vm) to call before effectively changing to this routehtml.afterUpdate: a callback (method or name of method on the vm) to call after effectively having changed to this route.data: an object that will be merged with the view's$data. This is useful when we need to use the same component for different urls but using different data.isDefault: boolean indicating wether this page should be the default, in case of non-existing URL. Think of it as theotherwisefrom Angular, so basically a 404 or the home page.
beforeUpdate is a middleware, this means you need to call the next function provided as the third argument, to continue routing. This allows to prevent a route based on some condition.
Vue is augmented with an additional method, Vue.navigate(path, [trigger]). [trigger] is a boolean (defaults to true) that will pushState if true, replaceState otherwise.
-
The router will emit events on your
$rootVM:router:started,router:beforeUpdate,router:afterUpdate. -
You can pass a
optionshash to pass configuration to the router:hashbang: boolean (defaults to false) to use#!urls. Note that your links shouldn't include hashbangs, the router handles this.click: boolean (defaults to true) to automatically bind all click to the router. Not that iffalse, you will need to explicitly callVue.navigatemethod).base: string (defaults to '/') to specify the base path.broadcast: boolean (defaults to false) if true the events will be emitted using the $root$broadcastmethod, so all child VMs will receive the event until a handlerreturn false;. If false, it uses$emit.debug: boolean (defaults to false) to activate logging from the directive.
When the router emits an event, 2 parameters are passed: location and oldLocation. Like in Angular, it is an object containing some useful properties:
regexp: the route regexp, such as/items/:itemId.path: the current path, such as/items/razor/.params: a hash of the params from the route, here{item: 'razor'}.componentId: the componentId associated to the current route.
- Fork & PR on dev branch.
- If possible, add tests to cover the changes.
- Code style: 4 tabs, semicolons. Check the code if in doubt.