最近想用vue開發(fā)一個(gè)多頁簽的后臺(tái)管理框架，github搜了下，還是有不少的可以借鑒的源碼。但是試用了下，發(fā)現(xiàn)由于keep-alive本身只能針對(duì)組件名，通過include及exclude做條件緩存，無法針對(duì)url做緩存，導(dǎo)致明細(xì)頁的窗口無法實(shí)現(xiàn)緩存，下面是之前找過的vue-element-admin框架的一個(gè)說明：

?

我試了下，vue-element-admin雖然可以打開多個(gè)article，但是每次切換標(biāo)簽，會(huì)在activated事件執(zhí)行重新加載數(shù)據(jù)，原先編輯一半數(shù)據(jù)會(huì)丟失。

做了多種嘗試，由于keep-alive與vue-router捆綁得太緊，最終放棄使用keep-alive，嘗試用動(dòng)態(tài)組件的方式實(shí)現(xiàn) 多頁簽功能。

首先，我們利用vuex來存放標(biāo)簽頁信息：

vuex state定義一個(gè)名叫pages的array

?

vuex mutations添加、刪除頁面的處理

?

?

第二步是，調(diào)整vue-router：

我這里將頁面分為兩種，一種是標(biāo)簽頁，也就是放在主窗體里面的，打開有對(duì)應(yīng)標(biāo)簽的頁面，如列表界面、編輯界面；另一種是非標(biāo)簽頁，如主窗體、錯(cuò)誤頁、登錄頁。

?

如上圖，屬于標(biāo)簽頁的列表、編輯等頁面有多了個(gè)name數(shù)據(jù)項(xiàng)，非標(biāo)簽頁不需要，該name將傳給component動(dòng)態(tài)組件

接下來，根據(jù)剛才在routes定義的數(shù)據(jù)，對(duì)標(biāo)簽頁組件做全局注冊

?

第三步，在vue-router的beforeEach攔截標(biāo)簽頁的路由，走自定義路由。這樣處理，我們就可以通過url鏈接的方式來打開標(biāo)簽頁，并可以通過url上傳入?yún)?shù)：

?

我們將to.params及to.query也保留下來，以傳給動(dòng)態(tài)組件，至于權(quán)限驗(yàn)證這里就不再說明

最后，在主框架main.vue上，增加動(dòng)態(tài)組件：

?

通過動(dòng)態(tài)組件我們就可以實(shí)現(xiàn)多頁簽的后臺(tái)管理框架，完全拋棄keep-alive，這種方式，可以支持編輯同一組件的多個(gè)明細(xì)頁，效果如下：

?

?

?