Elegant route definitions for Vue Router. Based on Laravel routing system.
You can install this package via yarn (or npm):
$ yarn add vue-routisan
The view resolver allows the view()
method to automatically require components for your routes. This saves you from having repetitive import
s and require
s 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
.
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');
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.
The name()
method sets the name
option on the route instance.
Route.view('/user/profile', 'Profile').name('profile');
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]);
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');
});
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'
});
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');
});
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'
});
});
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'
Route.all()
returns an array of all the defined routes.
import Route from 'vue-routisan';
// define view resolver
// define routes
export default Route.all();
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
routes: routes
});
Please see CONTRIBUTING for details.
Released under the MIT License.