JavaScript
Clone or download
Permalink
Failed to load latest commit information.
.circleci Setup linting + CircleCI (#7) Jan 15, 2018
.github Minor changes to issue template Apr 17, 2018
src 2.1.1 (#34) Apr 17, 2018
.editorconfig Initial commit Dec 14, 2017
.eslintrc.json Setup linting + CircleCI (#7) Jan 15, 2018
.gitignore Update .gitignore Dec 23, 2017
.npmignore 2.1.1 (#34) Apr 17, 2018
README.md 2.1.1 (#34) Apr 17, 2018
package.json 2.1.1 (#34) Apr 17, 2018

README.md

vue-routisan

Latest Version on NPM Software License PRs Welcome donate chat

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.

import Route from 'vue-routisan';

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

// shorthand
Route.setViewResolver((c) => require('./views/' + c));

NOTE: If you get the error Failed to mount component: template or render function not defined. try changing require(...) to require(...).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');

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.