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的封装，方面以后维护。