router.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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: '/:pathMatch(.*)*',
  61. name: 'notFound',
  62. meta: { title: '404' },
  63. component: () => import("@pages/404.vue"),
  64. }
  65. ]
  66. const router = createRouter({
  67. history: createWebHistory(),
  68. routes
  69. });
  70. window.addEventListener('load', () => {
  71. const routerStore = useRouterStore();
  72. const currentPage = routerStore.currentPages[routerStore.currentPages.length - 1];
  73. routerStore.resetCacheStatus();//刷新页面重置页面缓存状态
  74. if (currentPage?.params?.length) {
  75. const currentPageParams = currentPage.params[0];
  76. const eventName = Reflect.ownKeys(currentPageParams)[0];
  77. setTimeout(() => {
  78. if (routerEventEmitter.getListeners(`${location.pathname}.${eventName}`).length) {
  79. routerEventEmitter.emit(`${location.pathname}.${eventName}`, currentPageParams[eventName]);
  80. }
  81. }, 100)
  82. }
  83. });
  84. /*监听浏览器历史记录发生变化*/
  85. window.addEventListener('popstate', (event) => {
  86. const routerStore = useRouterStore();
  87. const toPathName = event.state.current.slice(1);
  88. const backPathName = routerStore.currentPages[routerStore.currentPages.length - 2]?.pathName; //返回页面pathName
  89. const forwardPathName = routerStore.historyPages[0]?.pathName; //前进页pathName
  90. let currentPage = {}; //前进或者后退成功的页面
  91. if (toPathName == backPathName) { //浏览器返回上一级页面
  92. currentPage = { ...routerStore.currentPages[routerStore.currentPages.length - 2] }; //返回页路由
  93. routerStore.delete(1);
  94. } else if (toPathName == forwardPathName) {//浏览器前进
  95. const forwardPage = { ...routerStore.historyPages[0] }; //前进页路由
  96. routerStore.deleteHistory(toPathName, true);
  97. currentPage = forwardPage;
  98. }
  99. //页面再次刷新之后,页面缓存会清空,处理页面缓存清空之后传参失效问题
  100. if (!currentPage.cache) {
  101. const currentPageParams = currentPage.params[0] || {};
  102. const eventName = Reflect.ownKeys(currentPageParams)[0];
  103. setTimeout(() => {
  104. if (routerEventEmitter.getListeners(`${location.pathname}.${eventName}`).length) {
  105. routerEventEmitter.emit(`${location.pathname}.${eventName}`, currentPageParams[eventName]);
  106. }
  107. }, 100)
  108. }
  109. });
  110. export default router