Vue3中router最佳封装落地

---

前言

router在使用过程中如果我们直接在一个文件的一个数组中配置，最后路由越来越多会导致不易管理，我们可以将一个页面的路由配置在一个数组中最后统一导入，这样就会方便很多。
一个好的项目肯定少不了模块的封装，下面我们就封装一个router路由文件，方便后续项目的维护。
本文采用的是vue3+vite+ts+vue-router

---

一、拆分路由文件夹？

我们将不同页面的路由放置在/src/router/modules/login.ts

每个模块文件里面编写路由规则

然后我们在/src/router/index.ts导入这个路由

import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export const aboutRouter = {
    path: '/about',
    name: 'about',
    component: () => import('@/views/about/index.vue'),
    meta: {},
    children: []
} as RouteRecordRaw;


const modules: Record<string, any> = import.meta.glob(['./modules/*.ts'], {
    eager: true
});
// 配置路由
const routes: Array<RouteRecordRaw> = [];
Object.keys(modules).forEach((key) => {
    const module = modules[key].default;
    routes.push(module);
});
routes.push(aboutRouter);

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

const noStatusPage = ['/login', '/about'];
router.beforeEach(async (_to, _from, next) => {
	// 路由动画加载插件
    NProgress.start();
    const token = sessionStorage.getItem('userInfo');
    const userIsLogin = token ? true : false;
    if (userIsLogin || noStatusPage.includes(_to.path)) {
        next();
    } else {
        next('/login');
    }
});
router.afterEach((_to) => {
    NProgress.done();
});
export default router;

二、main.ts中注册路由

总结

这样我们就完成了router的封装，方面以后维护。