vue-router-modern v2.0.0

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