# 2.index模塊 :id=index
index模塊主要是負責管理選項卡的打開、關閉,使用方法:
```javascript
layui.use(['index'], function () {
var index = layui.index;
index.xxx(); // 調用index模塊的方法
});
```
## 2.1.批量注冊路由 :id=reg
```javascript
index.regRouter([{
name: '用戶管理',
url: '#/system/user'
}]);
```
參數是一個數組,可以批量注冊路由,當你訪問`#/system/user`的時候,就會打開一個“用戶管理”的標簽頁,“url”是路由關鍵字,
對應的頁面地址是“components/system/user.html”,“components”和“.html”可以在config模塊中配置。
## 2.2.加載默認主頁 :id=load_home
```javascript
index.loadHome({
url: '#/console/console1',
name: '<i class="layui-icon layui-icon-home"></i>',
loadSetting: true,
onlyLast: false
});
```
- url: 必填 主頁路徑
- name: 必填 Tab標題
- loadSetting: 非必填 加載緩存的設置
- onlyLast: 非必填 是否僅恢復最后一個Tab
> 主頁的地址可以不在側邊欄中,因為“loadHome()”方法會檢查并注冊路由。
## 2.3.打開一個選項卡 :id=open_tab
```javascript
index.openNewTab({
name: '用戶管理',
url: '#/system/user'
});
// 也可以加參數
index.openNewTab({
name: '用戶管理',
url: '#/system/user/id=1'
});
```
- name: 選項卡的標題
- url: 路由關鍵字
也可以使用`<a href="#/system/user">用戶管理</a>`,這種寫法必須保證“#/system/user”已經注冊了路由,而“openNewTab()”方法會自動注冊路由。
!> 注意:openNewTab方法只是在調用這個方法的時候注冊路由,如果刷新頁面,路由就會不存在了,如果想刷新頁面也能使用,需要提前在main.js中注冊路由。
```javascript
// 在main.js的index.loadHome()方法之前注冊即可,注冊路由不用加參數
index.regRouter([{
name: '用戶管理',
url: '#/system/user'
}]);
```
## 2.4.關閉指定選項卡 :id=close_tab
```javascript
index.closeTab('/system/user');
```
!> 注意:關閉選項卡不要帶“#”號。
## 2.5.跳到指定選項卡 :id=go_tab
```javascript
index.go('/system/user');
```
跳轉頁面不要帶“#”號,相當于點擊了`<a href="#/system/user">`。
## 2.6.修改Tab標題 :id=set_tab
```javascript
index.setTabTitle('Hello'); // 修改當前Tab標題文字,也支持單標簽模式
index.setTabTitle('Hello', tabId); // 修改指定Tab標題文字
index.setTabTitleHtml('<span>Hello</span>'); // 修改整個標題欄的html,此方法只在單標簽模式有效
```
關閉多標簽時框架會自動生成一個標題欄,可使用此方法修改標題欄內容,參數為undefined時為隱藏標題欄。
## 2.7.獲取hash路徑 :id=hash_path
```javascript
index.getHashPath('#/system/user');
index.getHashPath('#/system/user/id=1/name=aa');
```
這兩種hash最后返回的都是“/system/user”,后面屬于參數傳遞,不屬于視圖的路徑。
## 2.8.側邊欄手風琴折疊 :id=accordion
默認是開啟的,如要關閉配置如下:
```html
<!-- 側邊欄 -->
<div class="layui-side">
<div class="layui-side-scroll">
<ul class="layui-nav layui-nav-tree" lay-accordion="false">
......省略其他部分
</ul>
</div>
</div>
```
修改layui-nav-tree上的`lay-accordion`屬性為false或者直接去掉即可,所謂手風琴效果就是一個菜單展開的時候,其他菜單自動折疊。
## 2.9.切換Tab自動刷新
```javascript
// 選項卡切換自動刷新
element.on('tab(admin-pagetabs)', function (data) {
var tabId = $(this).attr('lay-id');
var $content = $('.layui-layout-admin>.layui-body>.layui-tab>.layui-tab-content>.layui-tab-item>div[lay-id="' + tabId + '"]');
var layHash = $content.attr('lay-hash');
if ($content.html() && !layui.layRouter.isRefresh) {
layui.layRouter.refresh(layHash);
}
});
```
上面代碼寫在main.js中即可。