原生路由(作廢) · JeecgBoot Vue3前端文檔

# 路由 >[warning] 此文檔可忽略，JeecgBoot已經改造直接通過后臺配置菜單即可， > 保留文檔目的：便于大家理解前端菜單的原生實現。項目路由配置存放于[src/router/routes](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/router/routes)下面。[src/router/routes/modules](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/router/routes/modules)用于存放路由模塊，在該目錄下的文件會自動注冊。 ## 配置 ### 模塊說明在[src/router/routes/modules](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/router/routes/modules)內的`.ts`文件會被視為一個路由模塊。一個路由模塊包含以下結構 ~~~ import type { AppRouteModule } from '/@/router/types'; import { LAYOUT } from '/@/router/constant'; import { t } from '/@/hooks/web/useI18n'; const dashboard: AppRouteModule = { path: '/dashboard', name: 'Dashboard', component: LAYOUT, redirect: '/dashboard/analysis', meta: { icon: 'ion:grid-outline', title: t('routes.dashboard.dashboard'), }, children: [ { path: 'analysis', name: 'Analysis', component: () => import('/@/views/dashboard/analysis/index.vue'), meta: { affix: true, title: t('routes.dashboard.analysis'), }, }, { path: 'workbench', name: 'Workbench', component: () => import('/@/views/dashboard/workbench/index.vue'), meta: { title: t('routes.dashboard.workbench'), }, }, ], }; export default dashboard; ~~~ ### 多級路由注意事項 * 整個項目所有路由`name`不能重復 * 所有的多級路由最終都會轉成二級路由，所以不能內嵌子路由 * 除了 layout 對應的 path 前面需要加`/`，其余子路由都不要以`/`開頭 **示例** ~~~ import type { AppRouteModule } from '/@/router/types'; import { getParentLayout, LAYOUT } from '/@/router/constant'; import { t } from '/@/hooks/web/useI18n'; const permission: AppRouteModule = { path: '/level', name: 'Level', component: LAYOUT, redirect: '/level/menu1/menu1-1/menu1-1-1', meta: { icon: 'ion:menu-outline', title: t('routes.demo.level.level'), }, children: [ { path: 'tabs/:id', name: 'TabsParams', component: getParentLayout('TabsParams'), meta: { carryParam: true, hidePathForChildren: true, // 本級path將會在子級菜單中合成完整path時會忽略這一層級 }, children: [ path: 'tabs/id1', // 其上級有標記hidePathForChildren，所以本級在生成菜單時最終的path為 /level/tabs/id1 name: 'TabsParams', component: getParentLayout('TabsParams'), meta: { carryParam: true, ignoreRoute: true, // 本路由僅用于菜單生成，不會在實際的路由表中出現 }, ] }, { path: 'menu1', name: 'Menu1Demo', component: getParentLayout('Menu1Demo'), meta: { title: 'Menu1', }, redirect: '/level/menu1/menu1-1/menu1-1-1', children: [ { path: 'menu1-1', name: 'Menu11Demo', component: getParentLayout('Menu11Demo'), meta: { title: 'Menu1-1', }, redirect: '/level/menu1/menu1-1/menu1-1-1', children: [ { path: 'menu1-1-1', name: 'Menu111Demo', component: () => import('/@/views/demo/level/Menu111.vue'), meta: { title: 'Menu111', }, }, ], }, ], }, ], }; export default permission; ~~~ ### Meta 配置說明 ~~~ export interface RouteMeta { // 路由title 一般必填 title: string; // 動態路由可打開Tab頁數 dynamicLevel?: number; // 動態路由的實際Path, 即去除路由的動態部分; realPath?: string; // 是否忽略權限，只在權限模式為Role的時候有效 ignoreAuth?: boolean; // 可以訪問的角色，只在權限模式為Role的時候有效 roles?: RoleEnum[]; // 是否忽略KeepAlive緩存 ignoreKeepAlive?: boolean; // 是否固定標簽 affix?: boolean; // 圖標，也是菜單圖標 icon?: string; // 內嵌iframe的地址 frameSrc?: string; // 指定該路由切換的動畫名 transitionName?: string; // 隱藏該路由在面包屑上面的顯示 hideBreadcrumb?: boolean; // 如果該路由會攜帶參數，且需要在tab頁上面顯示。則需要設置為true carryParam?: boolean; // 隱藏所有子菜單 hideChildrenInMenu?: boolean; // 當前激活的菜單。用于配置詳情頁時左側激活的菜單路徑 currentActiveMenu?: string; // 當前路由不再標簽頁顯示 hideTab?: boolean; // 當前路由不再菜單顯示 hideMenu?: boolean; // 菜單排序，只對第一級有效 orderNo?: number; // 忽略路由。用于在ROUTE_MAPPING以及BACK權限模式下，生成對應的菜單而忽略路由。2.5.3以上版本有效 ignoreRoute?: boolean; // 是否在子級菜單的完整path中忽略本級path。2.5.3以上版本有效 hidePathForChildren?: boolean; } ~~~ ### 外部頁面嵌套只需要將`frameSrc`設置為需要跳轉的地址即可 ~~~ const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue'); { path: 'doc', name: 'Doc', component: IFrame, meta: { frameSrc: 'http://www.jeecg.com', title: t('routes.demo.iframe.doc'), }, }, ~~~ ### 外鏈只需要將`path`設置為需要跳轉的**HTTP 地址**即可 ~~~ { path: 'http://www.jeecg.com', name: 'DocExternal', component: IFrame, meta: { title: t('routes.demo.iframe.docExternal'), }, } ~~~ ### 動態路由Tab自動關閉功能若需要開啟該功能，需要在動態路由的`meta`中設置如下兩個參數： * `dynamicLevel`最大能打開的Tab標簽頁數 * `realPath`動態路由實際路徑(考慮到動態路由有時候可能存在N層的情況, 例：`/:id/:subId/:...`), 為了減少計算開銷, 使用配置方式事先規定好路由的實際路徑(注意: 該參數若不設置，將無法使用該功能) ~~~ { path: 'detail/:id', name: 'TabDetail', component: () => import('/@/views/demo/feat/tabs/TabDetail.vue'), meta: { currentActiveMenu: '/feat/tabs', title: t('routes.demo.feat.tabDetail'), hideMenu: true, dynamicLevel: 3, realPath: '/feat/tabs/detail', }, } ~~~ ## 圖標這里的`icon`配置，會同步到**菜單**（icon 的值可以查看[此處](icon.md)）。 ## 新增路由 ### 如何新增一個路由模塊 1. 在[src/router/routes/modules](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/router/routes/modules)內新增一個模塊文件。示例，新增 test.ts 文件 ~~~ import type { AppRouteModule } from '/@/router/types'; import { LAYOUT } from '/@/router/constant'; import { t } from '/@/hooks/web/useI18n'; const dashboard: AppRouteModule = { path: '/about', name: 'About', component: LAYOUT, redirect: '/about/index', meta: { icon: 'simple-icons:about-dot-me', title: t('routes.dashboard.about'), }, children: [ { path: 'index', name: 'AboutPage', component: () => import('/@/views/sys/about/index.vue'), meta: { title: t('routes.dashboard.about'), icon: 'simple-icons:about-dot-me', }, }, ], }; export default dashboard; ~~~ 此時路由已添加完成，不需要手動引入，放在[src/router/routes/modules](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/router/routes/modules)內的文件會自動被加載。 ### 驗證訪問**ip:端口/about/index**出現對應組件內容即代表成功 ## 路由刷新項目中采用的是**重定向**方式 ### 實現 ~~~ import { useRedo } from '/@/hooks/web/usePage'; import { defineComponent } from 'vue'; export default defineComponent({ setup() { const redo = useRedo(); // 執行刷新 redo(); return {}; }, }); ~~~ ### Redirect [src/views/sys/redirect/index.vue](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/views/sys/redirect/index.vue) ~~~ import { defineComponent, unref } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ name: 'Redirect', setup() { const { currentRoute, replace } = useRouter(); const { params, query } = unref(currentRoute); const { path } = params; const _path = Array.isArray(path) ? path.join('/') : path; replace({ path: '/' + _path, query, }); return {}; }, }); ~~~ ## 頁面跳轉頁面跳轉建議采用項目提供的`useGo` ### 方式 ~~~ import { useGo } from '/@/hooks/web/usePage'; import { defineComponent } from 'vue'; export default defineComponent({ setup() { const go = useGo(); // 執行刷新 go(); go(PageEnum.Home); return {}; }, }); ~~~ ## 多標簽頁標簽頁使用的是`keep-alive`和`router-view`實現，實現切換 tab 后還能保存切換之前的狀態。 ### 如何開啟頁面緩存開啟緩存有 3 個條件 1. 在[src/settings/projectSetting.ts](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/settings/projectSetting.ts)內將`openKeepAlive`設置為`true` 2. 路由設置`name`，且**不能重復** 3. 路由對應的組件加上`name`，與路由設置的`name`保持一致 ~~~ { ..., // name name: 'Login', // 對應組件組件的name component: () => import('/@/views/sys/login/index.vue'), ... }, // /@/views/sys/login/index.vue export default defineComponent({ // 需要和路由的name一致 name:"Login" }); ~~~ 注意 keep-alive 生效的前提是：需要將路由的`name`屬性及對應的頁面的`name`設置成一樣。因為： **include - 字符串或正則表達式，只有名稱匹配的組件會被緩存** ### 如何讓某個頁面不緩存 **可在 router.meta 下配置** 可以將`ignoreKeepAlive`配置成`true`即可關閉緩存。 ~~~ export interface RouteMeta { // 是否忽略KeepAlive緩存 ignoreKeepAlive?: boolean; } ~~~ ## 如何更改首頁路由首頁路由指的是應用程序中的默認路由，當不輸入其他任何路由時，會自動重定向到該路由下，并且該路由在Tab上是固定的，即使設置`affix: false`也不允許關閉例：首頁路由配置的是`/dashboard/analysis`，那么當直接訪問`http://localhost:3100/`會自動跳轉到`http://localhost:3100/#/dashboard/analysis`上(用戶已登錄的情況下) 可以將`pageEnum.ts`中的`BASE_HOME`更改為需要你想設置的首頁即可 ~~~ export enum PageEnum { // basic home path // 更改此處即可 BASE_HOME = '/dashboard', } ~~~