@deviltea/vue-router-middleware

A simple router middleware system implemented by beforeEach guard.

Install

npm install @deviltea/vue-router-middleware

Usage

import { createRouter, createWebHistory } from 'vue-router'
import { createHandleMiddlewares, defineMiddleware } from '@deviltea/vue-router-middleware'

const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/',
			component: () => import('./views/Home.vue'),
			meta: {
				// The property "middleware" could be a function or an array of functions.
				middleware: defineMiddleware((to, from) => {
					// Do something
					// Like a "beforeEnter" guard, if return false, the navigation will be aborted.
					// If return another route, the navigation will be redirected to the route.
					// If return nothing or true, it will continue to the next middleware.
					// All of the things above work the same way with async functions and Promises.
				})
			}
		},
		// Example of using an array of functions.
		{
			path: '/',
			component: () => import('./views/Home.vue'),
			meta: {
				middleware: [
					middleware1,
					middleware2,
					middleware3
				]
			}
		}
	]
})

router.beforeEach(createHandleMiddlewares())

License

MIT License © 2023-PRESENT DevilTea