前言

快速导航对于前端开发的靓仔们应该是很熟悉了，他能快速的切换到之前打开的页面，是系统更加灵活方便。我这里采用的是Vue+Element plus+Vuex+Router实现的快速导航，供大家参考。

一、分析

快速导航具备的功能点

展示打开过的导航项
点击导航项可以切换页面
导航关闭
导航关闭快捷方式（关闭当前、关闭其他、关闭左侧、关闭右侧和全部关闭）

样式方面完全采用的是Element Plus提供的Tabs 组件和Dropdown组件。

二、实现

基于Element Plus提供的Tabs 组件和Dropdown组件实现页面效果。代码如下

 <template>
   <div class="fast-nav">
     <el-tabs
         v-model="router.currentRoute.value.name"
         type="card"
         class="tabs"
         closable
         @tab-click="handleClick"
         @contextmenu.prevent.native="openContextMenu($event)"
         @tab-remove="removeTab">
       <el-tab-pane
           v-for="item in tabList"
           :key="item.name"
           :name="item.name">
         <template #label>
           <el-space>
             <el-icon style="font-size: 18px">
               <component class="el-icon" :is="item.menuIcon"></component>
             </el-icon>
             <span>{{ store.state.internationalization === 'zhCn' ? item.title : item.titleEn }}</span>
           </el-space>
         </template>
       </el-tab-pane>
     </el-tabs>
     <el-dropdown ref="dropdown" @command="handleCommand" trigger="contextmenu" style="position: absolute">
       <span></span>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item command="a" :icon="CircleClose">{{ $t('button.closeCurrent') }}</el-dropdown-item>
           <el-dropdown-item command="b" :icon="CircleCloseFilled">{{ $t('button.closeOther') }}</el-dropdown-item>
           <el-dropdown-item command="c" :icon="Back">{{ $t('button.closeLeft') }}</el-dropdown-item>
           <el-dropdown-item command="d" :icon="Right">{{ $t('button.closeRight') }}</el-dropdown-item>
           <el-dropdown-item command="e" :icon="DeleteFilled">{{ $t('button.closeAll') }}</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
   </div>
 </template>

实现数据动态化采用Vuex存储tabList集合，在路由跳转时存入到tabList集合中，关闭页面时再删除tabList中的对应项实现动态化，具体代码如下

 //路由守卫监听路由变化存储路由信息到tbList中
 router.beforeEach(async (to, from, next) => {
  store.dispatch("tabList", to).then()
 })

 //页面获取tabList
 import {useStore} from "@/vuex/store";
 const store = useStore(); 
 let tabList = ref(store.state.tabList)

实现快捷方式相关功能，具体代码如下

//关闭指定tab
const removeTab = (targetName: string) => {
  //首页不能关闭
  if (targetName === tabList.value[0].name) {
    return ElMessage.warning('工作台不能关闭 ！！！')
  }
  //获取路由下标
  const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
  //获取当前选中的tab下标
  const current = tabList.value.findIndex(item => item.name === targetName)
  //删除当前选中tab
  tabList.value.splice(current, 1);
  //判断当前下标和路由下标是否相同，是->跳转前一位路由
  if (index === current){
    router.push(tabList.value[index - 1].name)
  }
}
//关闭当前tab
const closeItem = () => {
  if (router.currentRoute.value.name === tabList.value[0].name) {
    return ElMessage.warning('工作台不能关闭 ！！！')
  }
  //获取路由下标
  const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
  //获取当前选中的tab下标
  tabList.value.splice(index, 1);
  //跳转前一位路由
  router.push(tabList.value[index - 1].name)
}
//关闭其他tab
const closeOther = () => {
  //获取路由下标
  const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
  //下表是否为0，是->删除0之后的所有数据
  if (index === 0) {
    tabList.value.splice(1);
  }
  //下表是否为1且集合长度大于2
  if (index === 1 && tabList.value.length > 2) {
    tabList.value.splice(2);
  }
  //下表大于1
  if (index > 1) {
    tabList.value.splice(1, index - 1);
    tabList.value.splice(2);
  }
}
//关闭左侧tab
const closeLeft = () => {
  //获取路由下标
  const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
  //判断下表是否大于1
  if (index > 1) {
    tabList.value.splice(1, index - 1);
  }
}
//关闭右侧tab
const closeRight = () => {
  //获取路由下标
  const index = tabList.value.findIndex(item => item.name === router.currentRoute.value.name)
  //判断下表是否小于总长度
  if (index < tabList.value.length - 1) {
    tabList.value.splice(index + 1, tabList.value.length - index);
  }
}
//关闭所有tab
const closeAll = () => {
  //判断总长度是否大于1
  if (tabList.value.length > 1) {
    tabList.value.splice(1);
  }
  //跳转首页
  router.push(tabList.value[0].name)
}
//下拉菜单dom
const dropdown = ref()
//打开下拉菜单并重新定位
const openContextMenu = (e) => {
  dropdown.value.handleClose()
  setTimeout(() => {
    dropdown.value.$el.style.left = e.x + 'px'
    dropdown.value.$el.style.top = e.y + 'px'
    dropdown.value.handleOpen()
  }, 50)
}
const router = useRouter();
//点击tab跳转路由
const handleClick = (tab: TabsPaneContext) => {
  router.push(tab.paneName.toString())
}
//点击下拉菜单中的菜单
const handleCommand = (command: string | number | object) => {
  switch (command) {
    case 'a':
      closeItem()
      break
    case 'b':
      closeOther()
      break
    case 'c':
      closeLeft()
      break
    case 'd':
      closeRight()
      break
    case 'e':
      closeAll()
      break
  }
}