Vue3导航栏组件封装实现方法

Vue3导航栏组件封装实现方法：

1. 创建导航栏组件

首先，在Vue项目中创建一个导航栏组件，可以使用Vue的组件化开发模式实现：

<template>
  <nav class="navbar">
    <ul>
      <li v-for="(item, index) in navList" :key="index">
        <a :href="item.path" :class="{'active': item.isActive}">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    navList: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.navbar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navbar li {
  margin-right: 15px;
}
.navbar a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.navbar a.active {
  color: #007bff;
}
</style>

在上面的代码中，我们创建了一个名为 Navbar 的组件，使用 props 接收一个名为 navList 的数组参数，遍历数组渲染导航栏的菜单项。

1. 定义数据和方法

我们需要在组件中定义一些数据和方法，以便于渲染和控制导航栏菜单的状态。

<template>
  <nav class="navbar">
    <ul>
      <li v-for="(item, index) in navList" :key="index">
        <a :href="item.path" :class="{'active': item.isActive}" @click="handleClick(index)">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    navList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentIndex: -1
    }
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index
      this.navList.forEach((item, i) => {
        item.isActive = i === index
      })
    }
  }
}
</script>

<style>
.navbar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navbar li {
  margin-right: 15px;
}
.navbar a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.navbar a.active {
  color: #007bff;
}
</style>

在上面的代码中，我们定义了一个名为 currentIndex 的变量，记录当前选中的菜单项索引。当用户点击一个菜单项时，我们将 currentIndex 的值设置为当前菜单项的索引，然后遍历 navList 数组，将选中的菜单项的 isActive 属性设置为 true，其它菜单项的 isActive 属性设置为 false。

1. 使用导航栏组件

最后，我们可以在 Vue 应用的任何页面中，使用我们刚才创建的 Navbar 组件：

<template>
  <div>
    <Navbar :navList="navList" />
    <h1>Welcome to Home Page</h1>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'Home',
  components: {
    Navbar
  },
  data() {
    return {
      navList: [
        { name: 'Home', path: '/home', isActive: true },
        { name: 'About', path: '/about', isActive: false },
        { name: 'Contact', path: '/contact', isActive: false }
      ]
    }
  }
}
</script>

在上面的代码中，我们使用了刚才创建的 Navbar 组件，并通过 props 传递了一个名为 navList 的数组参数。这个数组包含了导航栏的菜单项数据，可以根据实际情况修改。

示例说明：

1. 实现一个简单的导航栏组件，支持菜单项的选中状态，并可以在任何页面中使用。

<template>
  <nav class="navbar">
    <ul>
      <li v-for="(item, index) in navList" :key="index">
        <a :href="item.path" :class="{'active': item.isActive}" @click="handleClick(index)">{{ item.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    navList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentIndex: -1
    }
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index
      this.navList.forEach((item, i) => {
        item.isActive = i === index
      })
    }
  }
}
</script>

<style>
.navbar ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navbar li {
  margin-right: 15px;
}
.navbar a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.navbar a.active {
  color: #007bff;
}
</style>

1. 在应用的后台管理页面中使用导航栏组件，可以自定义菜单项的名称和地址。

<template>
  <div>
    <Navbar :navList="navList" />
    <h1>Welcome to Admin Panel</h1>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'Admin',
  components: {
    Navbar
  },
  data() {
    return {
      navList: [
        { name: 'Dashboard', path: '/admin/dashboard', isActive: true },
        { name: 'Users', path: '/admin/users', isActive: false },
        { name: 'Settings', path: '/admin/settings', isActive: false }
      ]
    }
  }
}
</script>