Vue + Ts 项目打造（四）：让左侧菜单栏更完善

2023-12-16 16:58:10

我们已经完成了基本的 Vue + Ts 项目搭建，现在是时候完善左侧菜单栏了。

菜单栏美化

1. 添加图标

菜单项的图标不仅能提升美观度，还能让用户一目了然地识别出每个菜单项的功能。我们可以使用 Font Awesome 这样的图标库来添加图标。

// main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas)

export default {
  components: {
    FontAwesomeIcon
  }
}

<!-- App.vue -->
<template>
  <div>
    <nav class="menu">
      <ul>
        <li v-for="item in menuItems" :key="item.name">
          <a :href="item.href">
            <font-awesome-icon :icon="item.icon" />
            {{ item.name }}
          </a>
        </li>
      </ul>
    </nav>

    <router-view />
  </div>
</template>

<script>
import { menuItems } from '@/data/menu'

export default {
  data() {
    return {
      menuItems
    }
  }
}
</script>

2. 动态控制菜单项显示与隐藏

有时候，我们可能需要根据用户的权限或其他因素来动态地控制菜单项的显示与隐藏。我们可以使用 Vue 的 v-if 指令来实现这一点。

<!-- App.vue -->
<template>
  <div>
    <nav class="menu">
      <ul>
        <li v-for="item in menuItems" :key="item.name" v-if="hasPermission(item.name)">
          <a :href="item.href">
            <font-awesome-icon :icon="item.icon" />
            {{ item.name }}
          </a>
        </li>
      </ul>
    </nav>

    <router-view />
  </div>
</template>

<script>
import { menuItems } from '@/data/menu'

export default {
  data() {
    return {
      menuItems
    }
  },
  methods: {
    hasPermission(permission) {
      // 这里需要根据实际情况来判断用户是否有这个权限
      return true
    }
  }
}
</script>

菜单栏交互

1. 使用 TypeScript 对菜单项数据进行类型化

为了提高代码的可读性和可维护性，我们可以使用 TypeScript 对菜单项数据进行类型化。

// data/menu.ts
export interface MenuItem {
  name: string
  href: string
  icon: string
}

export const menuItems: MenuItem[] = [
  {
    name: 'Home',
    href: '/',
    icon: 'fa-home'
  },
  // ...
]

// App.vue
<script lang="ts">
import { menuItems } from '@/data/menu'

export default {
  data() {
    return {
      menuItems
    }
  }
}
</script>

2. 处理路由跳转时菜单项的选中状态

当用户点击菜单项时，我们需要在左侧菜单栏中突出显示当前选中的菜单项。我们可以通过在路由跳转时动态地修改菜单项的 active 属性来实现这一点。

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  // ...
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // 获取当前路由的名称
  const currentRouteName = to.name

  // 遍历菜单项，找到当前路由对应的菜单项
  for (const item of menuItems) {
    if (item.name === currentRouteName) {
      item.active = true
    } else {
      item.active = false
    }
  }

  next()
})

export default router

<!-- App.vue -->
<template>
  <div>
    <nav class="menu">
      <ul>
        <li v-for="item in menuItems" :key="item.name">
          <a :href="item.href" :class="{ 'active': item.active }">
            <font-awesome-icon :icon="item.icon" />
            {{ item.name }}
          </a>
        </li>
      </ul>
    </nav>

    <router-view />
  </div>
</template>

<script>
import { menuItems } from '@/data/menu'

export default {
  data() {
    return {
      menuItems
    }
  }
}
</script>