通过路由meta里添加affix属性为true，就让当前路由tag始终固定在标签导航

Dashboard路由添加affix: true
image.png
效果
image.png
始终固定在开头不可删除

3-1 修改tagsView组件

对于要affix的路由 我们在最开始页面加载的时候，就要筛选出来，渲染到标签导航开头，并且不显示关闭icon

添加筛选affix路由tag方法 filterAffixTags
image.png
页面加载时进行筛选
image.png
src/layout/components/TagsView/index.vue

  1. <template>
  2.   <div class="tags-view-container">
  3.     <div class="tags-view-wrapper">
  4.       <router-link
  5.         class="tags-view-item"
  6.         :class="{
  7.           active: isActive(tag)
  8.         }"
  9.         v-for="(tag, index) in visitedTags"
  10.         :key="index"
  11.         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
  12.         tag="span"
  13.       >
  14.         {{ tag.title }}
  15.         <!-- affix固定的路由tag是无法删除 -->
  16.         <span
  17.           v-if="!isAffix(tag)"
  18.           class="el-icon-close"
  19.           @click.prevent.stop="closeSelectedTag(tag)"
  20.         ></span>
  21.       </router-link>
  22.     </div>
  23.   </div>
  24. </template>
  26. <script lang="ts">
  27. import { defineComponent, computed, watch, onMounted } from 'vue'
  28. import { useRoute, RouteRecordRaw, useRouter } from 'vue-router'
  29. import { useStore } from '@/store'
  30. import { RouteLocationWithFullPath } from '@/store/modules/tagsView'
  31. import { routes } from '@/router'
  32. import path from 'path'
  34. export default defineComponent({
  35.   name: 'TagsView',
  36.   setup() {
  37.     const store = useStore()
  38.     const router = useRouter()
  39.     const route = useRoute()
  40.     // 可显示的tags view
  41.     const visitedTags = computed(() => store.state.tagsView.visitedViews)
  43.     // 从路由表中过滤出要affixed tagviews
  44.     const fillterAffixTags = (routes: Array<RouteLocationWithFullPath | RouteRecordRaw>, basePath = '/') => {
  45.       let tags: RouteLocationWithFullPath[] = []
  46.       routes.forEach(route => {
  47.         if (route.meta && route.meta.affix) {
  48.           // 把路由路径解析成完整路径，路由可能是相对路径
  49.           const tagPath = path.resolve(basePath, route.path)
  50.           tags.push({
  51.             name: route.name,
  52.             path: tagPath,
  53.             fullPath: tagPath,
  54.             meta: { ...route.meta }
  55.           } as RouteLocationWithFullPath)
  56.         }
  58.         // 深度优先遍历 子路由（子路由路径可能相对于route.path父路由路径）
  59.         if (route.children) {
  60.           const childTags = fillterAffixTags(route.children, route.path)
  61.           if (childTags.length) {
  62.             tags = [...tags, ...childTags]
  63.           }
  64.         }
  65.       })
  66.       return tags
  67.     }
  69.     // 初始添加affix的tag
  70.     const initTags = () => {
  71.       const affixTags = fillterAffixTags(routes)
  72.       for (const tag of affixTags) {
  73.         if (tag.name) {
  74.           store.dispatch('tagsView/addVisitedView', tag)
  75.         }
  76.       }
  77.     }
  79.     // 添加tag
  80.     const addTags = () => {
  81.       const { name } = route
  82.       if (name) {
  83.         store.dispatch('tagsView/addView', route)
  84.       }
  85.     }
  87.     // 路径发生变化追加tags view
  88.     watch(() => route.path, () => {
  89.       addTags()
  90.     })
  92.     // 最近当前router到tags view
  93.     onMounted(() => {
  94.       initTags()
  95.       addTags()
  96.     })
  98.     // 当前是否是激活的tag
  99.     const isActive = (tag: RouteRecordRaw) => {
  100.       return tag.path === route.path
  101.     }
  103.     // 让删除后tags view集合中最后一个为选中状态
  104.     const toLastView = (visitedViews: RouteLocationWithFullPath[], view: RouteLocationWithFullPath) => {
  105.       // 得到集合中最后一个项tag view 可能没有
  106.       const lastView = visitedViews[visitedViews.length - 1]
  107.       if (lastView) {
  108.         router.push(lastView.fullPath as string)
  109.       } else { // 集合中都没有tag view时
  110.         // 如果刚刚删除的正是Dashboard 就重定向回Dashboard（首页）
  111.         if (view.name === 'Dashboard') {
  112.           router.replace({ path: '/redirect' + view.fullPath as string })
  113.         } else {
  114.           // tag都没有了 删除的也不是Dashboard 只能跳转首页
  115.           router.push('/')
  116.         }
  117.       }
  118.     }
  120.     // 关闭当前右键的tag路由
  121.     const closeSelectedTag = (view: RouteLocationWithFullPath) => {
  122.       // 关掉并移除view
  123.       store.dispatch('tagsView/delView', view).then(() => {
  124.         // 如果移除的view是当前选中状态view, 就让删除后的集合中最后一个tag view为选中态
  125.         if (isActive(view)) {
  126.           toLastView(visitedTags.value, view)
  127.         }
  128.       })
  129.     }
  131.     // 是否是始终固定在tagsview上的tag
  132.     const isAffix = (tag: RouteLocationWithFullPath) => {
  133.       return tag.meta && tag.meta.affix
  134.     }
  136.     return {
  137.       visitedTags,
  138.       isActive,
  139.       closeSelectedTag,
  140.       isAffix
  141.     }
  142.   }
  143. })
  144. </script>
  146. <style lang="scss" scoped>
  147. .tags-view-container {
  148.   width: 100%;
  149.   height: 34px;
  150.   background: #fff;
  151.   border-bottom: 1px solid #d8dce5;
  152.   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  153.   .tags-view-wrapper {
  154.     .tags-view-item {
  155.       display: inline-block;
  156.       height: 26px;
  157.       line-height: 26px;
  158.       border: 1px solid #d8dce5;
  159.       background: #fff;
  160.       color: #495060;
  161.       padding: 0 8px;
  162.       box-sizing: border-box;
  163.       font-size: 12px;
  164.       margin-left: 5px;
  165.       margin-top: 4px;
  166.       &:first-of-type {
  167.         margin-left: 15px;
  168.       }
  169.       &:last-of-type {
  170.         margin-right: 15px;
  171.       }
  172.       &.active {
  173.         background-color: #42b983;
  174.         color: #fff;
  175.         border-color: #42b983;
  176.         &::before {
  177.           position: relative;
  178.           display: inline-block;
  179.           content: '';
  180.           width: 8px;
  181.           height: 8px;
  182.           border-radius: 50%;
  183.           margin-right: 5px;
  184.           background: #fff;
  185.         }
  186.       }
  187.     }
  188.   }
  189. }
  190. </style>
  192. <style lang="scss">
  193. .tags-view-container {
  194.   .el-icon-close {
  195.     width: 16px;
  196.     height: 16px;
  197.     position: relative;
  198.     left: 2px;
  199.     border-radius: 50%;
  200.     text-align: center;
  201.     transition: all .3s cubic-bezier(.645, .045, .355, 1);
  202.     transform-origin: 100% 50%;
  203.     &:before {
  204.       transform: scale(.6);
  205.       display: inline-block;
  206.       vertical-align: -1px;
  207.     }
  208.     &:hover {
  209.       background-color: #b4bccc;
  210.       color: #fff;
  211.     }
  212.   }
  213. }
  214. </style>

3-2 修改dashboard路由测试

image.png

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/57a145201a064baa9e3e78afd607ae2a3827505d