類似於瀏覽器視窗一樣的路由切換邏輯，看著還是挺高大上的，本以為有很多高階的玩意兒，奈何複雜的東西總是由簡單的東西拼接而成的，這個功能也不例外。

本篇文章主要描述兩個問題：

如何實現這種Tab標籤頁的路由效果 如何為路由切換新增轉場動畫。

該功能的開發主要使用到 AntDesignVue 元件庫的Tab元件和 Animate.css

效果如下：

Tab標籤頁實現

首先是該元件的模板部分， ContextMenu 元件是我們自定義的右鍵選單，後面會說到。 a-tabs 元件則是 ant 的元件，具體用法不詳述，可以檢視官方文件。還有一個 PageToggleTransition 元件，是我們用來實現動畫切換的元件，非常簡單。

/**
 * TabLayout.vue 的模板部分，簡單看一下有個印象
 */
<template>
 <PageLayout>
 <ContextMenu
  :list="menuItems"
  :visible.sync="menuVisible"
  @select="onMenuSelect"
 />
 <!-- 標籤部分 -->
 <a-tabs
  type="editable-card"
  :hide-add="true"
  :active-key="activePage"
  @change="changePage"
  @edit="editPage"
  @contextmenu="onContextmenu"
 >
  <a-tab-pane v-for="page in pageList" :key="page.fullPath">
  <template #tab>
   <span :data-key="page.fullPath">
   {{ page.name }}
   </span>
  </template>
  </a-tab-pane>
 </a-tabs>
 <!-- 路由出口 -->
 <PageToggleTransition name="fadeIn">
  <keep-alive :exclude="dustbin">
  <router-view />
  </keep-alive>
 </PageToggleTransition>
 </PageLayout>
</template>

原理

維護一個 pageList ，通過監聽路由變化動態的新增和刪除page。而所謂的page，就是頁面的路由物件（$route），我們正是通過 $route.fullPath 作為頁面的唯一標識的。而刪除頁面時不光要操作 pageList ，還要利用 keep-alive 元件的 exclude 屬性刪除快取。至於 a-tabs 元件的這個插槽，主要是為了繫結一個數據key，以便觸發contextmenu事件時，可以更容易的獲取到對應頁面的key值（fullPath）

理論存在，實踐開始。

路由監聽

watch: {
 $route: {
  handler (route) {
  this.activePage = route.fullPath
  this.putCache(route)
  const index = this.pageList.findIndex(item => item.fullPath === route.fullPath)
  if (index === -1) {
   this.pageList.push(route)
  }
  },immediate: true
 }
}

路由變化時，主要做三件事：

• 設定當前頁（activePage）
• 將當前頁加入快取，即移出垃圾桶（dustbin）
• 如果當前頁不在pageList中，則新增進來。

頁面跳轉

methods: {
 changePage (key) {
  this.activePage = key
  this.$router.push(key)
 },editPage (key,action) {
  if (action === 'remove') {
  this.remove(key)
  }
 },remove (key) {
  if (this.pageList.length <= 1) {
  return message.info('最後一頁了哦~')
  }
  let curIndex = this.pageList.findIndex(item => item.fullPath === key)
  const { matched } = this.pageList[curIndex]
  const componentName = last(matched).components.default.name
  this.dustbin.push(componentName)
  this.pageList.splice(curIndex,1)
  // 如果刪除的是當前頁才需要跳轉
  if (key === this.activePage) {
  // 判斷向左跳還是向右跳
  curIndex = curIndex >= this.pageList.length ? this.pageList.length - 1 : curIndex
  const page = this.pageList[curIndex]
  this.$router.push(page.fullPath).finally(() => {
   this.dustbin.splice(0) // 重置，否則會影響到某些元件的快取
  })
  }
 }
 ...
 ...
}

這裡主要主要說一下remove方法：

• 如果是最後一頁，則忽略
• 在pageList中找到當前頁對應的元件名用於刪除快取（這裡不清楚的可以看一下 keep-alive元件 ，和 $route.matched ）
• 如果刪除的是當前頁，需要進行頁面跳轉，向左挑還是向右跳呢？

需要強調的時 keep-alive 的 exclude 屬性，當元件名被匹配到的時候就會立即清除快取，所以， dustbin 新增完之後記得要重置，否則下次就不會快取了。

自定義contextmenu事件

解釋下，contextmenu事件就是右鍵選單事件，我們可以通過監聽事件，使得右鍵選單事件觸發的時候顯示我們的自定義選單。

methods: {
 // 自定義右鍵選單的關閉功能
 onContextmenu (e) {
  const key = getTabKey(e.target) // 這裡的判斷，用到了前面在span標籤上加的data-key自定義屬性
  if (!key) return // 主要是為了控制選單的顯示或隱藏

  e.preventDefault() // 組織預設行為，顯示我們的自定義郵件選單
  this.menuVisible = true
 }
 ...
 ...
}
/**
 * 由於ant-design-vue元件庫的TabPane元件暫不支援自定義監聽器，無法直接獲取到右鍵target所在標籤頁的key 。故增加此方法用於
 * 查詢右鍵target所在標籤頁的標識 key ，以用於自定義右鍵選單的事件處理。
 * 注：TabPane元件支援自定義監聽器後可去除該方法並重構 ‘自定義右鍵選單的事件處理'
 * @param target 查詢開始目標
 * @param depth 查詢層級深度 （查詢層級最多不超過3層，超過3層深度直接返回 null）
 * @returns {String}
 */
function getTabKey (target,depth = 0) {
 if (depth > 2 || !target) {
 return null
 }
 return target.dataset.key || getTabKey(target.firstElementChild,++depth)
}

另外要說的是，dom元素上以 data- 開頭的屬性會被收錄進元素的 dataset 屬性中， data-key 訪問時就是 dom.dataset.key

下面就是我們的 ContextMenu 元件了：

效果圖：

程式碼如下：

<template>
 <a-menu
 v-show="visible"
 class="contextmenu"
 :style="style"
 :selectedKeys="selectedKeys"
 @click="handleClick"
 >
 <a-menu-item v-for="item in list" :key="item.key">
  <a-icon v-if="item.icon" :type="item.icon"/>
  <span>{{ item.text }}</span>
 </a-menu-item>
 </a-menu>
</template>

<script>
export default {
 name: 'ContextMenu',props: {
 visible: {
  type: Boolean,required: false,default: false
 },list: {
  type: Array,required: true,default: () => []
 }
 },data () {
 return {
  left: 0,top: 0,target: null,selectedKeys: []
 }
 },computed: {
 style () {
  return {
  left: this.left + 'px',top: this.top + 'px'
  }
 }
 },created () {
 const clickHandler = () => this.closeMenu()
 const contextMenuHandler = e => this.setPosition(e)
 window.addEventListener('click',clickHandler)
 window.addEventListener('contextmenu',contextMenuHandler)
 this.$emit('hook:beforeDestroy',() => {
  window.removeEventListener('click',clickHandler)
  window.removeEventListener('contextmenu',contextMenuHandler)
 })
 },methods: {
 closeMenu () {
  this.$emit('update:visible',false)
 },setPosition (e) {
  this.left = e.clientX
  this.top = e.clientY
  this.target = e.target
 },handleClick ({ key }) {
  this.$emit('select',key,this.target)
  this.closeMenu()
 }
 }
}
</script>

<style lang="stylus" scoped>
 .contextmenu
 position fixed
 z-index 1000
 border-radius 4px
 border 1px lightgrey solid
 box-shadow 4px 4px 10px lightgrey !important
 .ant-menu-item
 margin 0 !important
</style>

這裡需要強調的是鉤子函式 created 的內容：

1.首先全域性事件需要成對出現，有新增就要有移除，否則可能造成記憶體洩漏，並導致一些其他的bug。就比如在模組熱替換的專案中，會造成反覆繫結的問題。

2.為什麼這裡要給window繫結contextmenu事件和click事件，之前不是綁過了嗎？這裡的click事件主要是為了關閉選單，右鍵選單的特點是，不論點了什麼點了哪裡，只要點一下就會關閉。這裡的contextmenu事件主要是為了獲取到事件物件 event ，以此來設定選單的位置。而之前繫結在 a-tabs 元件上的contextmenu事件主要是為了阻止預設事件，我們只攔截了該元件，而不需要攔截全域性範圍。

自定義右鍵選單主要是為了 從 event.target 中獲取到我們需要的key並以事件的形式傳遞出來 ，便於分發後面的邏輯，即：

onMenuSelect (key,target) {
 const tabKey = getTabKey(target)
 switch (key) {
  case '1': this.closeLeft(tabKey); break
  case '2': this.closeRight(tabKey); break
  case '3': this.closeOthers(tabKey); break
  default: break
 }
}

這三種情況的邏輯是基本一致的，主要做了三件事：

1. 清除快取
2. 刪除頁面，並設定當前頁面
3. 頁面跳轉

以closeOthers為例：

closeOthers (tabKey) {
 const index = this.pageList.findIndex(item => item.fullPath === tabKey) // 找到觸發事件時滑鼠停留在那個tab上
 for (const route of this.pageList) {
  if (route.fullPath !== tabKey) {
   this.clearCache(route) // 清快取
  }
 }
 const page = this.pageList[index]
 this.pageList = 
                        123下一頁閱讀全文