VueJS routes definitions that can be created anywhere in your project.
It's just a singleton object that store all your routes for future export to the vue-router.
npm install --save vue-tidyroutesapp.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueTidyRoutes from 'vue-tidyroutes';
import './component1'
Vue.use(VueRouter)
const router = new VueRouter({
routes: VueTidyRoutes.export()
})
new Vue({
router,
el: '#app',
template: `
<div>
<h1>Example</h1>
<router-view></router-view>
</div>
`
})component1.js
import VueTidyRoutes from 'vue-tidyroutes';
const Component1 = { template: '<div><h2>Component1</h2></div>' };
VueTidyRoutes.route('/component1', {
name: 'component1',
component: Component1
});
export default Component1;VueTidyRoutes.route(path, options)
VueTidyRoutes.route(path)
VueTidyRoutes.route(path).child(path, options)
Create a route:
VueTidyRoutes.route(path, options)
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
let route1 = VueTidyRoutes.route('/foo', {
component: Foo
})
let route2 = VueTidyRoutes.route('/bar', {
component: Bar
})Nested routes:
There are two ways to define nested routes
const Foo = { template: '<div>foo<router-view></router-view></div>' }
const Bar = { template: '<div>bar</div>' }
VueTidyRoutes.route('/foo', {
component: Foo
})
VueTidyRoutes.route('/foo').child('/bar', {
component: Bar
})const Foo = { template: '<div>foo<router-view></router-view></div>' }
const Bar = { template: '<div>bar</div>' }
VueTidyRoutes.route('/foo', {
component: Foo,
children: {
'/bar': {
component: Bar
}
}
})Detailed example at /example
To run the example just: npm run example
| Method | Description | Example |
|---|---|---|
| .route | Defines a new route with the given options | VueTidyRoutes.route('/home', {...options}) |
| .children | Defines a group of child for the current route | VueTidyRoutes.route('/contact').children({ '/phone': ...options}, {'/location': ...options}) |
| .child | Defines a single child for the route | VueTidyRoutes.route('/places).child('/centralpark', { ...options }) |
| .export | Returns all the defined routes in the entire project in the format that VueRouter expects | const router = new VueRouter({routes: VueTidyRoutes.export()}) |
The MIT License (MIT). Please see License File for more information.