解決方案

Vue Router Tab 實現過程中遇到的問題及解決方案，也歡迎提出更好的點子。

相同路由需要根據 route.params 或 route.query 不同，根據規則生成不同的緩存：

<router-view> 添加 key 屬性，根據 key 不同生成不同的實例。
通過 <keep-alive> 組件實例，精准控制緩存：
1. 獲取 <keep-alive> 實例：
  
  在 <transition> 過渡組件包裹下，通過 this._vnode.children[0].child._vnode.componentInstance 獲取 <keep-alive> 組件實例。
2. 匹配並移除緩存：
  1. 根據緩存 $alive.cache[i].data.key 來匹配緩存。
  2. 銷毀當前緩存組件實例：$alive.cache[key].componentInstance.$destroy()。
  3. 從 $alive.keys 數組中移除當前 key。
頁面組件強制刷新：
1. 移除當前頁面組件緩存。
2. router-view 組件通過 v-if 隱藏，在過渡效果結束或 nextTick 后再顯示。
獲取當前組件所在的路由深度：

遞歸查找最近的擁有 $vnode.data.routerViewDepth 的父組件的對應值。
嵌套路由 <router-view> 的 key，如果直接從 $route 中獲取，子路由切換時會生成不同緩存：

應該從 $route.matched 中匹配當前嵌套深度所在路由的 path。
打開開啟緩存的嵌套路由的一個子路由頁面 a，然后訪問其他路由頁面，再直接訪問嵌套路由的另一個子路由頁面 b，此時展示的依然是 a，與路由地址不匹配

通過 activated 鈎子，頁面組件執行 $forceUpdate 強制更新。

副作用：子路由頁面 a 仍會觸發 activated 鈎子
iframe 頁面頁簽切換后會重新加載：
1. 將 <iframe> 節點放在頁面所在 <router-view> 的外層，通過 v-show 控制顯示隱藏。
2. 建立 iframe 路由頁面組件，通過生命周期鈎子來添加、顯示、隱藏、移除 <iframe> dom 節點。

打包后的 js 文件太龐大：

構建庫時，配置 babel.config.js 中 useBuiltIns 為 false，打包時不包含 Polyfill。

常見問題

#📣 RouterTab 不支持多層嵌套路由生成頁簽 (issues 32 (opens new window))

RouterTab 控件是有意設計成這樣的，只有包含 RouterTab 組件的路由的直接子路由才參與生成頁簽頁面，再嵌套的下級路由跟 Vue Router 中一樣展現。

試想一下，一個頁簽頁面內部還有子頁簽控制頁面展示，並且子頁簽也需要響應路由，這種場景是必須嵌套路由支持的。

所有的頁簽路由都直接放在同一層會很雜亂，我們可以使用 ... 展開運算符，將不同模塊的路由配置合並引入：

// RouterTab 內置路由
import { RouterTabRoutes } from 'vue-router-tab'

const news = [{...}]
const product = [{...}]

const routes = [
  {
    path: '/',
    component: Frame,
    children: [
      ...RouterTabRoutes,
      ...news,
      ...product,
    ]
  }
]

移除 RouterTab

相對於單頁應用，多頁簽框架為用戶同時處理多個業務時的跨頁操作帶來了更好的體驗，但這也使得我們要處理更多的頁面交互場景，代碼相對會更加復雜。

如果你的項目不再需要使用 RouterTab，你可以通過下面的步驟來移除 RouterTab。

#一、替換 `this.$tabs` 調用

批量查找 $tabs 全局調用，參考下表使用替換方案。

方法	說明	替換方案
`$tabs.open`	全新打開頁簽	`$router.push(path)`
`$tabs.close`	關閉頁簽並跳轉新頁面	`$router.replace(path)`
`$tabs.refresh` `$tabs.refreshAll`	刷新頁簽	組件內部提供刷新數據方法
`$tabs.reset`	重置頁簽，回到默認或指定頁	`$router.replace(path)`
`$tabs.openIframe` `$tabs.closeIframe` `$tabs.refreshIframe`	iframe 頁簽相關方法	需要添加全局 iframe 路由用於嵌入頁面，並封裝方法用於操作 iframe 頁面
`beforePageLeave`	頁面離開確認	`beforeRouteLeave(to, from, next)` 參考：Vue-Router 組件內的守衛(opens new window)

#二、去除 `<router-tab>` 組件

使用 <router-view> 替換布局框架組件內的 <router-tab>
參考入門說明移除相關代碼：
1. 入口文件移除 RouterTab 安裝代碼
2. 路由配置文件移除 RouterTab 內置路由和頁簽相關配置
移除 RouterTab 依賴

推薦使用 yarn：
```
yarn remove vue-router-tab 
```
1
你也可以用 npm：
```
npm uninstall vue-router-tab 
```
1

#三、調整頁面交互方式

使用單頁方式，意味着不再支持跨頁操作

你需要將原來切換頁簽操作的流程，更改為單頁內部的操作，可以使用例如彈窗、抽屜、子頁面等交互方式。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 學習使用vue-router tab切換（五） vue-router切換時loading效果實現 Vue router前端路由配置以及實現tab切換使用vue-router進行頁面切換時滾動條位置與滾動監聽事件 vue-router 基本使用 vue-router 基本使用 vue-router基本使用 vue實現tab切換 vue tab切換demo Vue-router結合transition實現app前進后退動畫切換效果

學習使用vue-router tab切換（六）