vue-router-utils

vue-router-utils

Vue Router 4 Utilities

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