vue-routisan

Elegant route definitions for Vue Router. Based on Laravel routing system.

Install

You can install this package via yarn (or npm):

$ yarn add vue-routisan

Usage

Setting the view resolver

The view resolver allows the view() method to automatically require components for your routes. This saves you from having repetitive imports and requires when defining routes.

The view resolver is optional. If you choose to not configure it, you can import a component and pass it directly as the 2nd parameter of the view() method.

import Route from 'vue-routisan';

Route.setViewResolver((component) => {
    return require('./views/' + component).default;
});

Basic usage

The view() method receives the path and component route options respectively. If you defined the view resolver, you may directly specify the name of the component.

Reference: Vue route options

Route.view('/', 'Home');

Without the view resolver

import Home from './views/Home';

Route.view('/', Home);

Redirect routes

The redirect() method receives the path and redirect route options respectively.

Route.redirect('/home', '/');

NOTE: The methods view() and redirect() both return a route instance.

Named routes

The name() method sets the name option on the route instance.

Route.view('/user/profile', 'Profile').name('profile');

Navigation guards

The guard() method sets the beforeEnter option on the route instance.

const auth = (to, from, next) => { /* must be logged in */ };
const admin = (to, from, next) => { /* user must be admin */ };

Route.view('/account/settings', 'Settings').guard(auth);

You may also provide an array of guards. They will be executed in the order they are listed in the array.

This applies not only to the guard() method, you can do this with any of the methods below that can apply navigation guards to routes.

Route.view('/admin/dashboard', 'Dashboard').guard([auth, admin]);

Nested Routes

The children() method sets the children option on the route instance.

Route.view('/user', 'User').children(() => {
    Route.view('', 'UserList');
    Route.view(':id', 'UserDetails');
    Route.view(':id/edit', 'UserEdit');
});

Setting other route options

Use the options() method to set all other options on the route instance.

This method will not override the path and component options. They will be ignored if you specify them.

The children option expects a callback function instead of an array (See Nested Routes).

Reference: Vue route options

const guest = (to, from, next) => { /* already logged in */ };

Route.view('/auth/signin', 'Signin').options({
    name: 'login',
    beforeEnter: guest
});

beforeEnter has the alias guard for consistency with the guard() method.

Route.view('/auth/signup', 'Signup').options({
    guard: guest // alias for 'beforeEnter'
});

Route groups

Allows you to apply route options to multiple routes.

• Navigation guards defined for the group will take priority over guards defined on the individual routes in the callback.
• Route groups can be nested.

Route.group({ beforeEnter: guest }, () => {
    Route.view('/auth/password/forgot', 'Forgot');
    Route.view('/auth/password/reset', 'Reset');
});

Route prefixes

Add a prefix to the path of each route in a group.

Route.group({ prefix: '/blog' }, () => {
    Route.group({ prefix: '/posts' }, () => {
        Route.view('/', 'PostIndex');        // '/blog/posts'
        Route.view('/create', 'CreatePost'); // '/blog/posts/create'
        Route.view('/edit', 'EditPost');     // '/blog/posts/edit'
    });
});

Automatically formatted paths

Options such as path, redirect, alias, and prefix are automatically formatted.

Slashes will not be prepended to the paths of nested routes.

'/'                // '/'
'products'         // '/products'
'categories/'      // '/categories'
'shop/checkout'    // '/shop/checkout'
'password/change/' // '/password/change'

Retrieve all routes

Route.all() returns an array of all the defined routes.

router/routes.js

import Route from 'vue-routisan';

// define view resolver

// define routes

export default Route.all();

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

export default new VueRouter({
    mode: 'history',
    routes: routes
});

Contributing

Please see CONTRIBUTING for details.

License

Released under the MIT License.