index.ts 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import {createWebHistory, createRouter, RouteRecordRaw} from 'vue-router';
  2. /* Layout */
  3. import Layout from '@/layout/index.vue';
  4. /**
  5. * Note: 路由配置项
  6. *
  7. * hidden: true // 当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面,或者如一些编辑页面/edit/1
  8. * alwaysShow: true // 当你一个路由下面的 children 声明的路由大于1个时,自动会变成嵌套的模式--如组件页面
  9. * // 只有一个时,会将那个子路由当做根路由显示在侧边栏--如引导页面
  10. * // 若你想不管路由下面的 children 声明的个数都显示你的根路由
  11. * // 你可以设置 alwaysShow: true,这样它就会忽略之前定义的规则,一直显示根路由
  12. * redirect: noRedirect // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
  13. * name:'router-name' // 设定路由的名字,一定要填写不然使用<keep-alive>时会出现各种问题
  14. * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
  15. * roles: ['admin', 'common'] // 访问路由的角色权限
  16. * permissions: ['a:a:a', 'b:b:b'] // 访问路由的菜单权限
  17. * meta : {
  18. noCache: true // 如果设置为true,则不会被 <keep-alive> 缓存(默认 false)
  19. title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
  20. icon: 'svg-name' // 设置该路由的图标,对应路径src/assets/icons/svg
  21. breadcrumb: false // 如果设置为false,则不会在breadcrumb面包屑中显示
  22. activeMenu: '/system/user' // 当路由设置了该属性,则会高亮相对应的侧边栏。
  23. }
  24. */
  25. // 公共路由
  26. export const constantRoutes: RouteRecordRaw[] = [
  27. {
  28. path: '/',
  29. redirect: '/index'
  30. },
  31. {
  32. path: '/redirect',
  33. component: Layout,
  34. hidden: true,
  35. children: [
  36. {
  37. path: '/redirect/:path(.*)',
  38. component: () => import('@/views/redirect/index.vue')
  39. }
  40. ]
  41. },
  42. {
  43. path: '/login',
  44. component: () => import('@/views/login.vue'),
  45. hidden: true
  46. },
  47. {
  48. path: '/index',
  49. component: () => import('@/views/index.vue'),
  50. },
  51. {
  52. path: '/iconEdit',
  53. component: () => import('@/views/iconEdit.vue'),
  54. hidden: true
  55. },
  56. {
  57. path: '/:pathMatch(.*)*',
  58. component: () => import('@/views/error/404.vue'),
  59. hidden: true
  60. },
  61. ];
  62. // 动态路由,基于用户权限动态去加载
  63. export const dynamicRoutes: RouteRecordRaw[] = [
  64. // {
  65. // path: '/system/user-auth',
  66. // component: Layout,
  67. // hidden: true,
  68. // permissions: ['system:user:edit'],
  69. // children: [
  70. // {
  71. // path: 'role/:userId(\\d+)',
  72. // component: () => import('@/views/system/user/authRole.vue'),
  73. // name: 'AuthRole',
  74. // meta: { title: '分配角色', activeMenu: '/system/user', icon: '' }
  75. // }
  76. // ]
  77. // },
  78. // {
  79. // path: '/system/role-auth',
  80. // component: Layout,
  81. // hidden: true,
  82. // permissions: ['system:role:edit'],
  83. // children: [
  84. // {
  85. // path: 'user/:roleId(\\d+)',
  86. // component: () => import('@/views/system/role/authUser.vue'),
  87. // name: 'AuthUser',
  88. // meta: { title: '分配用户', activeMenu: '/system/role', icon: '' }
  89. // }
  90. // ]
  91. // },
  92. // {
  93. // path: '/system/dict-data',
  94. // component: Layout,
  95. // hidden: true,
  96. // permissions: ['system:dict:list'],
  97. // children: [
  98. // {
  99. // path: 'index/:dictId(\\d+)',
  100. // component: () => import('@/views/system/dict/data.vue'),
  101. // name: 'Data',
  102. // meta: { title: '字典数据', activeMenu: '/system/dict', icon: '' }
  103. // }
  104. // ]
  105. // },
  106. // {
  107. // path: '/system/oss-config',
  108. // component: Layout,
  109. // hidden: true,
  110. // permissions: ['system:ossConfig:list'],
  111. // children: [
  112. // {
  113. // path: 'index',
  114. // component: () => import('@/views/system/oss/config.vue'),
  115. // name: 'OssConfig',
  116. // meta: { title: '配置管理', activeMenu: '/system/oss', icon: '' }
  117. // }
  118. // ]
  119. // },
  120. // {
  121. // path: '/tool/gen-edit',
  122. // component: Layout,
  123. // hidden: true,
  124. // permissions: ['tool:gen:edit'],
  125. // children: [
  126. // {
  127. // path: 'index/:tableId(\\d+)',
  128. // component: () => import('@/views/tool/gen/editTable.vue'),
  129. // name: 'GenEdit',
  130. // meta: { title: '修改生成配置', activeMenu: '/tool/gen', icon: '' }
  131. // }
  132. // ]
  133. // }
  134. ];
  135. /**
  136. * 创建路由
  137. */
  138. const router = createRouter({
  139. history: createWebHistory(import.meta.env.VITE_APP_CONTEXT_PATH),
  140. routes: constantRoutes,
  141. // 刷新时,滚动条位置还原
  142. scrollBehavior(to, from, savedPosition) {
  143. if (savedPosition) {
  144. return savedPosition;
  145. } else {
  146. return {top: 0};
  147. }
  148. }
  149. });
  150. // 添加自定义方法 pushTarget
  151. router.pushTarget = (url: string, query: Record<string, any> = {}) => {
  152. const origin = location.origin
  153. // 构造 query 字符串
  154. const queryStr = new URLSearchParams(query).toString()
  155. const fullUrl = origin + url + (queryStr ? '?' + queryStr : '')
  156. window.open(fullUrl, '_blank')
  157. }
  158. export default router;