學習使用vue router tab切換(二)

2022-09-10 02:54:09 字數 2291 閱讀 2764

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

使用 vue router 內建的方式開啟頁籤,如果您之前訪問過該位址,您開啟的將是快取的頁籤頁面。

使用元件

"

/page/1

">頁面1

使用router.pushrouter.replacerouter.go等方法

this.$router.push('

/page/1

')

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

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

this.$tabs.open('

/page/2

')

close()

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

關閉當前頁籤

this.$tabs.close()

關閉指定頁籤

//

關閉指定 fullpath 的頁籤

this.$tabs.close('

/page/1')

//關閉指定 location 的頁籤

this

.$tabs.close(

})

關閉頁籤後跳轉位址

//

關閉 '/page/1' 跳轉到 '/page/2'

this.$tabs.close('

/page/1

', '

/page/2')

//關閉當前頁籤跳轉到 '/page/2'

this

.$tabs.close()

完整選項說明

this

.$tabs.close()

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

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

重新整理當前頁籤

this.$tabs.refresh()

重新整理指定頁籤

//

重新整理指定 fullpath 的頁籤

this.$tabs.refresh('

/page/1')

//重新整理指定 location 的頁籤

this

.$tabs.refresh(

})

模糊重新整理頁籤

//

重新整理與給定位址共用頁籤的位址,即使位址不完全匹配

//預設規則下,類似 '/page/1?query=2' 這樣的頁籤也能被匹配重新整理

this.$tabs.refresh('

/page/1

', false)

refreshall (force = false)

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

重新整理所有頁籤

this.$tabs.refreshall()

強制重新整理所有頁籤,忽略頁面元件的beforepagele**e配置

this.$tabs.refreshall(true)

reset (to = this.defaultpath)

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

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

//

重置頁籤並跳轉預設頁面

//程式會自動獲取頁籤父路由位址為預設頁面

//您也可以通過 routertab 的 'default-page' 來指定

this

.$tabs.reset()

//重置頁籤並跳轉 /page/2

this.$tabs.reset('

/page/2

')

MySQL使用學習使用 mysql學習使用

1 mysql學習 1 安裝 ubuntu下直接安裝 apt get install mysql server 2 檢查伺服器是否啟動 sudo netstat tap grep mysql,如果啟動成功,出現以下資訊 tcp00localhost.localdomain mysql listen ...

學習使用CSDN markdown使用

建立乙個自定義列表 如何建立乙個註腳 注釋也是必不可少的 katex數學公式 新的甘特圖功能,豐富你的文章 uml 圖表 flowchart流程圖 匯出與匯入 你好!這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章,了解一下mar...

學習使用PIVOT

假設有這樣的乙個需求 有乙個表中儲存了某個部門的各個員工的每一年的各類薪金,記錄儲存格式如 員工姓名 薪金數目 薪金種類 年份 現在要求根據員工的姓名進行查詢,查詢出某些員工各個年份的薪金總數,出來的結果要求 columnname 年份 員工1姓名 員工2姓名 columnvalue 年份 薪金總數...