router.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import { createRouter, createWebHistory } from "vue-router";
  2. import useRouterStore from "@store/useRouterStore.js";
  3. import { routerEventEmitter } from "@store/useRouterStore.js";
  4. const routes = [
  5. {
  6. path: '/',
  7. redirect: '/login',
  8. component: () => import("@pages/login.vue")
  9. }, {
  10. path: '/login',
  11. name: 'login',
  12. meta: { title: '登录' },
  13. component: () => import("@pages/login.vue"),
  14. }, {
  15. path: '/home',
  16. name: 'home',
  17. meta: { title: '首页' },
  18. component: () => import("@pages/tabbar/home/index.vue"),
  19. }, {
  20. path: '/my',
  21. name: 'my',
  22. meta: { title: '我的' },
  23. component: () => import("@pages/tabbar/my/index.vue"),
  24. }, {
  25. path: '/news',
  26. name: 'news',
  27. meta: { title: '消息' },
  28. component: () => import("@pages/tabbar/news/index.vue"),
  29. }, {
  30. path: '/work',
  31. name: 'work',
  32. meta: { title: '工作' },
  33. component: () => import("@pages/tabbar/work/index.vue"),
  34. }, {
  35. path: '/moduleList',
  36. name: 'moduleList',
  37. meta: { title: '模块列表' },
  38. component: () => import("@pages/moduleList/moduleList.vue"),
  39. }, {
  40. path: '/details',
  41. name: 'details',
  42. meta: { title: '模块详情' },
  43. component: () => import("@pages/moduleDetails/index.vue"),
  44. }, {
  45. path: '/addEditor',
  46. name: 'addEditor',
  47. meta: { title: '模块新增编辑' },
  48. component: () => import("@pages/addEditor/index.vue"),
  49. }, {
  50. path: '/addEditorVisitor',
  51. name: 'addEditorVisitor',
  52. meta: { title: '新增编辑访客计划' },
  53. component: () => import("@pages/visitorProgram/addEditorVisitor.vue"),
  54. }, {
  55. path: '/visitorDetails',
  56. name: 'visitorDetails',
  57. meta: { title: '访客计划详情' },
  58. component: () => import("@pages/visitorProgram/visitorDetails.vue"),
  59. }, {
  60. path: '/pdfPreview',
  61. name: 'pdfPreview',
  62. meta: { title: 'PDF预览' },
  63. component: () => import("@pages/pdfPreview/index.vue"),
  64. }, {
  65. path: '/:pathMatch(.*)*',
  66. name: 'notFound',
  67. meta: { title: '404' },
  68. component: () => import("@pages/404.vue"),
  69. }
  70. ]
  71. const router = createRouter({
  72. history: createWebHistory(),
  73. routes
  74. });
  75. window.addEventListener('load', () => {
  76. const routerStore = useRouterStore();
  77. const currentPage = routerStore.currentPages[routerStore.currentPages.length - 1];
  78. routerStore.resetCacheStatus();//刷新页面重置页面缓存状态
  79. if (currentPage?.params?.length) {
  80. const currentPageParams = currentPage.params[0];
  81. const eventName = Reflect.ownKeys(currentPageParams)[0];
  82. setTimeout(() => {
  83. if (routerEventEmitter.getListeners(`${location.pathname}.${eventName}`).length) {
  84. routerEventEmitter.emit(`${location.pathname}.${eventName}`, currentPageParams[eventName]);
  85. }
  86. }, 100)
  87. }
  88. });
  89. /*监听浏览器历史记录发生变化*/
  90. window.addEventListener('popstate', (event) => {
  91. const routerStore = useRouterStore();
  92. const toPathName = event.state.current.slice(1);
  93. const backPathName = routerStore.currentPages[routerStore.currentPages.length - 2]?.pathName; //返回页面pathName
  94. const forwardPathName = routerStore.historyPages[0]?.pathName; //前进页pathName
  95. let currentPage = {}; //前进或者后退成功的页面
  96. if (toPathName == backPathName) { //浏览器返回上一级页面
  97. currentPage = { ...routerStore.currentPages[routerStore.currentPages.length - 2] }; //返回页路由
  98. routerStore.delete(1);
  99. } else if (toPathName == forwardPathName) {//浏览器前进
  100. const forwardPage = { ...routerStore.historyPages[0] }; //前进页路由
  101. routerStore.deleteHistory(toPathName, true);
  102. currentPage = forwardPage;
  103. }
  104. //页面再次刷新之后,页面缓存会清空,处理页面缓存清空之后传参失效问题
  105. if (!currentPage.cache) {
  106. const currentPageParams = currentPage.params[0] || {};
  107. const eventName = Reflect.ownKeys(currentPageParams)[0];
  108. setTimeout(() => {
  109. if (routerEventEmitter.getListeners(`${location.pathname}.${eventName}`).length) {
  110. routerEventEmitter.emit(`${location.pathname}.${eventName}`, currentPageParams[eventName]);
  111. }
  112. }, 100)
  113. }
  114. });
  115. export default router