Vue router modern

Router of Vue.js - Easily write modern vue routes.

中文 / Chinese

Features

• Support sub-module.
• Gracefully writing modern code.

Installation

Using npm:

$ npm install vue-router-modern

Using yarn:

$ yarn add vue-router-modern

Example

Basic using:

// in src/router/index.js file generated by vue-init
import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import Router from 'vue-router-modern';

const router = Router.group(router => {
  router.get('/', HelloWorld);
});

Vue.use(VueRouter);

export default new VueRouter({
  routes: router.routes(),
})

Sub-module using:

// in src/router/modules/home.js file
import Router from 'vue-router-modern';
import HelloWorld from '@/components/HelloWorld';

export default Router.get('/', HelloWorld, 'HelloWorld');

// in src/router/index.js file generated by vue-init
import Vue from 'vue';
import VueRouter from 'vue-router';
import Router from 'vue-router-modern';
import HomeRouter from './modules/home.js';

const router = new Router();

router.register(HomeRouter);

Vue.use(VueRouter);

export default new VueRouter({
  routes: router.routes(),
})

Page redirection:

// in src/router/index.js file generated by vue-init
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Router from 'vue-router-modern'

const router = Router.group(router => {
  router.get('/', HelloWorld, 'HelloWorld');

  router.redirect('/redirect_to_home', '/');
});

Vue.use(VueRouter);

export default new VueRouter({
  routes: router.routes()
})

Router class methods

instance()

It will return an instance of Router.

Example:

const router = Router.instance();

get(path, component[, name, props, meta, alias])

Basic route definition method.

Example:

import HomeComponent from '@/components/Home'

const router = Router.get('/', HomeComponent);

getWithNamedComponents(path, components[, name, props, meta, alias])

The route definition method for named views.

Example:

import MainComponent from '@/components/example_for_named_views/Main';
import LeftComponent from '@/components/example_for_named_views/Left';
import RightComponent from '@/components/example_for_named_views/Right';

const router = Router.getWithNamedComponents('example_for_named_views', {
  main: MainComponent,
  left: LeftComponent,
  right: RightComponent,
});

redirect(path, components[, name, props, meta, alias])

The route definition method for redirecting.

Example:

const router = Router.redirect('/redirect_to_home', '/');

group(callback)

Group method is used to define sub-routing.

The callback function has a router parameter of Router instance.

Example:

// For basic using.
import HomeComponent from '@/components/Home';

const router = Router.group(rotuer => {
  router.get('/', HomeComponent);
});

// For sub-module using, It's can be define multiple routes of the same type
// in src/router/users.js

export default Router.group(router => {
  // The router parameter is a Router instance.
  router.get('/user', UserComponent);

  router.get('/user/:userId', UserDetailComponent); // It is not a sub-route of the user.
});

Instance methods

routes()

Generate official routes rules.

Example:

import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

const router = new Router();

router.get('/', HelloWorld);

Vue.use(VueRouter);

export default new VueRouter({
  routes: router.routes(),
})

The available instance methods are listed below.

get(path, component[, name, props, meta, alias])

Basic route definition method.

getWithNamedComponents(path, components[, name, props, meta, alias])

The route definition method for named views.

Example:

const router = Router.instance();

router.getWithNamedComponents('example_for_named_views', {
  main: MainComponent,
  left: LeftCompoent,
  right: RightComponent,
});

redirect(path, redirectTo[, name])

The route definition method for redirecting.

group(callback)

Group method is used to define sub-routing.

The callback function has a router parameter of Router instance.

Example:

const router = Router.instance();

router.get('/posts', PostHomeComponent)
      .group(router => {

        router.get(':id', PostDetailComponent); // It's a sub-route for posts
        
        router.get('new', PostCreaterComponent); // Its' a sub-router for posts

      });

// The routes like this of vue-router official definition:
// {
//   path: '/posts',
//   component: PostHomeComponent,
//   children: [
//     {path: '/user', component: UserComponent},
//     {path: '/user/:userId', component: UserDetailComponent},
//   ]
// }

register(router[, router2[, ...routerN]])

Register sub-routes, usually used for sub-modules. Reference sub-module example

Example:

// in src/router/index.js file generated by vue-init
import Vue from 'vue'
import VueRouter from 'vue-router'
import Router from 'vue-router-modern';
import UserRouter from './modules/user/index.js';
import PostRouter from './modules/post/index.js';

const router = Router.instance();

router.register(UserRouter, PostRouter)

Vue.use(VueRouter);

export default new VueRouter({
  routes: router.routes()
})

Contributing

You can create a pull requests to this repository.

Welcome your ideas or code.

Issues

If you have any questions, please ask your question in the Issues and I will try my best to help you.

License

MIT