持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

横向导航栏

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

横向导航栏

上一节，我们将项目中 缺失的功能之一 面包屑 进行了新增

这一节，将另一个确实的功能，横向导航栏 也进行新增

效果

这里先把 所要实现的 页面效果 展示出来，如下图

可以看到是 layout 的 header 的部分

逻辑

逻辑如下：

首先我们在 Pinia 中，创建一个存储当前 tab 的一个数组 tabs

在用户每次点击 左侧的侧边栏 来进行访问时

记录当前 路由状态,即 路由 的

• path 值

• 以及 title 值

并且，默认是 首页 进行高亮

• 在切换路由时，能够进行跳转

• 并且 通过当前的 路由 状态信息，来将 对应的 tab进行高亮

实现

首先是在我们的 layout 布局下

位置为 src\layout\header\index.vue ，页面代码为：

  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <router-link
        v-for="(item, index) in getTabs"
        ref="tag"
        :key="item.path"
        :class="isActive(item) ? 'active' : ''"
        :to="{ path: item.path }"
        tag="span"
        class="tags-view-item"
      >
        <span style="margin-right: 5px">{{ item.title }}</span>
        <svg-icon v-if="index !== 0" class="del" @click.prevent.stop="closeSelectedTag(item)" iconName="icon-quxiao1" color="#fff"></svg-icon>
      </router-link>
    </div>
  </el-scrollbar>

点击 左侧侧边栏 新增的代码

  const userStore = useUserStore()
  const layoutStore = useLayoutStore()

  const getTabs = layoutStore.getTabs

  const isExistence = getTabs.find((item) => {
    return item.path === key
  })

  if (!isExistence) {
    const obj = userStore.getMenusNamePath.filter((item: any) => {
      return item.path === key
    })[0]

    layoutStore.addTab(obj)
  }

有点击可以 删除 的功能

const delTabUtils = (key = '') => {
  const layoutStore = useLayoutStore()

  const getTabs = layoutStore.getTabs

  const currentTabs = getTabs.filter((item) => {
    return item.path !== key
  })

  layoutStore.setTab(currentTabs)
}

以及判断当前应该 高亮哪个 tab 的逻辑代码如下：

const closeSelectedTag = (tag) => {

  // 判断是否是 当前活动的tab
  if (isActive(tag)) {
    delTabUtils(tag.path)
    const lastTag = getTabs.value[getTabs.value.length - 1].path
    router.push(lastTag)
  } else {
    delTabUtils(tag.path)
  }
}

通过上面代码即可完成 横向导航栏 的效果

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

完成了 页面 横向导航栏 的效果