# 路由
>[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',
}
~~~
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘