index.ts 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { createWebHashHistory, createWebHistory, createRouter, type RouteRecordRaw } from 'vue-router'
  2. import { errorRouter, staticRouter } from '@/router/modules/staticRouter'
  3. import type { App } from 'vue'
  4. const mode = import.meta.env.VITE_ROUTER_MODE
  5. import { NO_RESET_WHITE_LIST } from '@/constants'
  6. // 路由模式
  7. const routerMode = {
  8. hash: () => createWebHashHistory(),
  9. history: () => createWebHistory()
  10. }
  11. /**
  12. * @description 📚 路由参数配置简介
  13. * @param path ==> 路由菜单访问路径
  14. * @param name ==> 路由 name (对应页面组件 name, 可用作 KeepAlive 缓存标识 && 按钮权限筛选)
  15. * @param redirect ==> 路由重定向地址
  16. * @param component ==> 视图文件路径
  17. * @param meta ==> 路由菜单元信息
  18. * @param meta.icon ==> 菜单和面包屑对应的图标
  19. * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
  20. * @param meta.activeMenu ==> 当前路由为详情页时,需要高亮的菜单
  21. * @param meta.isLink ==> 路由外链时填写的访问地址
  22. * @param meta.isHidden ==> 是否在菜单中隐藏 (通常列表详情页需要隐藏)
  23. * @param meta.isFull ==> 菜单是否全屏 (示例:数据大屏页面)
  24. * @param meta.isAffix ==> 菜单是否固定在标签页中 (首页通常是固定项)
  25. * @param meta.isKeepAlive ==> 当前路由是否缓存
  26. */
  27. const router = createRouter({
  28. history: routerMode[mode](),
  29. routes: [...staticRouter, ...errorRouter] as RouteRecordRaw[],
  30. strict: false,
  31. scrollBehavior: () => ({ left: 0, top: 0 })
  32. })
  33. // 全局注册 router
  34. export const setupRouter = (app: App<Element>) => {
  35. app.use(router)
  36. }
  37. /**
  38. * @description 重置路由
  39. **/
  40. export const resetRouter = (): void => {
  41. router.getRoutes().forEach(route => {
  42. const { name } = route
  43. if (name && !NO_RESET_WHITE_LIST.includes(name as string)) {
  44. router.hasRoute(name) && router.removeRoute(name)
  45. }
  46. })
  47. }
  48. export default router