vue-tidyroutes

vue-tidyroutes plugin

VueJS routes definitions that can be created anywhere in your project.

Under the hood

It's just a singleton object that store all your routes for future export to the vue-router.

Install

npm install --save vue-tidyroutes

Example

app.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;

Usage

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

Methods

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()})

License

The MIT License (MIT). Please see License File for more information.