vue-enchanced-router

Enchanced Router

This package adds loaders and guards functionality to the vue-router.

Install

npm i vue-enchanced-router

Guards

You can chain multiple beforeEnter hooks, so you can have much more flexible security management code. You can use them simply by adding array brackets at the beforeEnter section.

router.js

...
{
    path: '/sample',
    component: ImportantComponent,
    beforeEnter: [isAuthorized, hasRightsToAccess]
}
...

Syntax of the guards is usual beforeEnter function style

guards/is-authorized.js

...
export const isAuthorized = (to, from, next) => {
    if ( hasToken() ) {
        next()
    } else  {
        next({ name: "LoginPage" })
    }
}
...

Loaders

In order to use loaders, you need to add a spinnerComponent to the router initialization object. You can also pass a errorComponent component for custom message if loader catches an error. Loader also passes error prop to the error component, sou can process it in your own way.

router.js

...
import Spinner from './Spinner.vue'
import ErrorMessage from './ErrorMessage.vue';
import SampleComponent from './SampleComponent.vue'

import {SampleDataLoader} from './loaders/sample-data'
import {AnotherDataLoader} from './loaders/another-data'

import EnchancedRouter from 'vue-enchanced-router'

const router = new EnchancedRouter({
    mode: 'history'
    loader: {
        spinnerComponent: Spinner,
        errorComponent: ErrorMessage,
        transition: "fade"
    }
    routes: [
        {
            path: '/sample',
            component: SampleComponent,
            loaders: [SampleDataLoader, AnotherDataLoader],
        }
    ]
})
...

Loaders are promise based, so loader component will be displayed until all loaders promises are resolved Syntax of loaders:

loaders/sample-data

...
export const SampleDataLoader = () => {
    return store.dispatch('sample/fetchSomeData')
}