Features

• Route Name Inheritance • Prefixing Children Routes • Meta Inheritance • Disable Pathrooting • Sort Routes Alphabetically with Errors always at the End

Usage

Install

npm i vue-router-utils -D

Getting Started

RouterUtilities will output a Vue Router 4 compatible Routes Array. Just the specific Changes from the Utilities will be applied.

import { RouterUtilites } from 'vue-router-utils';

export const routes = new RouterUtilities([
	{
		path: '/'
		name: 'home'
	}
]);

Changes

In the following you will see some Changes that get applied from RouterUtilities to a normal Routes Array.

Before:

[
	{
		path: '/auth',
		name: 'auth',
		children: [
			{
				path: '',
				name: 'login'
			},
			{
				path: '/register',
				name: 'register'
			}
		]
	},
	{
		path: '/:pathMatch(.*)*',
		name: 'error',
	},
	{
		prefix: '/u/:user',
		meta: {
			isAuthenticated: false
		},
		children: [
			{
				path: '/profile',
				name: 'profile'
			},
			{
				path: '/stats',
				name: 'stats'
			}
		]
	},
	{
		path: '/:location_id',
		children: [
			{
				path: '',
				name: 'info'
			}
		]
	}
]

After [ + sorted asc with errors at the end ]:

[
	{
		path: '/auth',
		name: 'auth',
		children: [
			{
				path: '',
				name: 'auth:login'
			},
			{
				path: 'register',
				name: 'auth:register'
			}
		]
	},
	{
		path: '/:location_id',
		children: [
			{
				path: '',
				name: 'location:info'
			}
		]
	},
	{
		path: '/u/:user/profile',
		name: 'user:profile',
		meta: {
			isAuthenticated: false
		},
	},
	{
		path: '/u/:user/stats',
		name: 'user:stats',
		meta: {
			isAuthenticated: false
		},
	},
	{
		path: '/:pathMatch(.*)*',
		name: 'error',
	},
]

License

MIT License © 2020-2021 Leon Langer