原文官方地址：https://bhuh12.github.io/vue-router-tab/zh/guide/essentials/operate.html

頁籤操作

開啟/切換頁籤

RouterTab 通過響應路由變化來新增或切換頁籤，您可以使用以下兩種方式。

1. Vue Router 原生方式（推薦）

使用 Vue Router 內建的方式開啟頁籤，如果您之前訪問過該地址，您開啟的將是快取的頁籤頁面。

使用<router-link>元件

<router-link to="/page/1">頁面1</router-link>

使用router.push、router.replace

this.$router.push('/page/1')

RouterTab 內建方法

open (path, isReplace = false, refresh = true)

此方法預設會重新整理已有頁籤，如果希望全新開啟頁籤，您可以嘗試此方法。

this.$tabs.open('/page/2')

關閉頁籤

close({id, path, match = true, force = true, to, refresh = false})

您可以通過 RouterTab 的例項方法routerTab.close來關閉指定頁籤

關閉當前頁籤

this.$tabs.close()

關閉指定頁籤

// 關閉指定 fullPath 的頁籤
this.$tabs.close('/page/1')

// 關閉指定 location 的頁籤
this.$tabs.close({
  name: 'page',
  params: {
    id: 2
  }
})

關閉頁籤後跳轉地址

// 關閉 '/page/1' 跳轉到 '/page/2'
this.$tabs.close('/page/1', '/page/2')

// 關閉當前頁籤跳轉到 '/page/2'
this.$tabs.close({
  to: '/page/2'
})

完整選項說明

this.$tabs.close({
  id: 
 
'', // 通過頁籤 id （即 key 返回值）關閉頁籤, 與 path 二選一即可
  path: '/page/2', // 通過路由路徑關閉頁籤，可 location 物件方式傳入。如果未配置 id 和 path 則關閉當前頁籤
  match: false, // path 方式關閉時，是否匹配 path 完整路徑，預設 true
  force: false, // 是否強制關閉，預設 true
  to: '/page/1', // 關閉後跳轉的地址，可 location 物件方式傳入。(未設定則跳轉上一個頁籤，最後一個頁籤預設關閉後跳轉預設頁)
  refresh: true // 是否全新開啟跳轉地址 預設 false
})

重新整理頁籤

refresh (path, match = true, force = true)

您可以通過 RouterTab 的例項方法routerTab.refresh來重新整理指定頁籤

重新整理當前頁籤

this.$tabs.refresh()

重新整理指定頁籤

// 重新整理指定 fullPath 的頁籤
this.$tabs.refresh('/page/1')

// 重新整理指定 location 的頁籤
this.$tabs.refresh({
  name: 'page',
  params: {
    id: 2
  }
})

模糊重新整理頁籤

// 重新整理與給定地址共用頁籤的地址，即使地址不完全匹配
// 預設規則下，類似 '/page/1?query=2' 這樣的頁籤也能被匹配重新整理
this.$tabs.refresh('/page/1', false)

重新整理所有頁籤

refreshAll (force = false)

您可以通過 RouterTab 的例項方法routerTab.refreshAll來重新整理所有頁籤

重新整理所有頁籤

this.$tabs.refreshAll()

強制重新整理所有頁籤，忽略頁面元件的beforePageLeave配置

this.$tabs.refreshAll(true)

重置頁籤

reset (to = this.defaultPath)

通常，在使用者重新登入或者切換角色的情況下，我們需要關閉使用者所有頁籤並恢復頁籤初始狀態，包括恢復初始頁籤、跳轉到指定的預設頁面等

針對這些場景，您可以使用routerTab.reset方法來重置頁簽到初始狀態

// 重置頁籤並跳轉預設頁面
// 程式會自動獲取頁籤父路由地址為預設頁面
// 您也可以通過 RouterTab 的 'default-page' 來指定
this.$tabs.reset()

// 重置頁籤並跳轉 /page/2
this.$tabs.reset('/page/2')