https://github.com/edgarnadal/vue-tidyroutes
Tidy routes definitions across your entire project
https://github.com/edgarnadal/vue-tidyroutes
Last synced: 7 months ago
JSON representation
Tidy routes definitions across your entire project
- Host: GitHub
- URL: https://github.com/edgarnadal/vue-tidyroutes
- Owner: edgarnadal
- License: mit
- Created: 2017-11-04T02:37:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-03T12:33:40.000Z (almost 7 years ago)
- Last Synced: 2025-04-17T12:01:25.239Z (8 months ago)
- Language: JavaScript
- Size: 177 KB
- Stars: 50
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-tidyroutes - Tidy routes definitions across your entire project ` 📝 2 years ago` (UI Utilities [🔝](#readme))
- awesome-vue-zh - vue-tidyroutes - 分散的vue-router路由定义 (UI实用程序 / 路由)
- awesome-vue - vue-tidyroutes - Decentralized vue-router routes definitions (Components & Libraries / UI Utilities)
- awesome-vue - vue-tidyroutes ★38 - Decentralized vue-router routes definitions (UI Utilities / Routing)
- awesome-vue - vue-tidyroutes - Decentralized vue-router routes definitions (UI Utilities / Routing)
README
# 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
```js
npm install --save vue-tidyroutes
```
## Example
> app.js
```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: `
Example
`
})
```
> component1.js
```js
import VueTidyRoutes from 'vue-tidyroutes';
const Component1 = { template: '
Component1
' };
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)`
```js
const Foo = { template: '
foo' }
const Bar = { template: 'bar' }
let route1 = VueTidyRoutes.route('/foo', {
component: Foo
})
let route2 = VueTidyRoutes.route('/bar', {
component: Bar
})
```
*Nested routes:*
There are two ways to define nested routes
```js
const Foo = { template: '
foo' }
const Bar = { template: 'bar' }
VueTidyRoutes.route('/foo', {
component: Foo
})
VueTidyRoutes.route('/foo').child('/bar', {
component: Bar
})
```
```js
const Foo = { template: '
foo' }
const Bar = { template: 'bar' }
VueTidyRoutes.route('/foo', {
component: Foo,
children: {
'/bar': {
component: Bar
}
}
})
```
Detailed example at [/example](https://github.com/edgarnadal/vue-tidyroutes/tree/master/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](LICENSE) for more information.