前端Vue自定义个性化导航栏菜单组件的设计与实现

<template>
  <div class="navigation-bar">
    <ul>
      <li v-for="(menuItem, index) in menuItems" :key="index">
        <router-link :to="menuItem.link">{{ menuItem.text }}</router-link>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'NavigationBar',
  data() {
    return {
      menuItems: [
        { text: '首页', link: '/' },
        { text: '关于我们', link: '/about' },
        { text: '产品服务', link: '/services' },
        { text: '博客', link: '/blog' },
        { text: '联系方式', link: '/contact' }
      ]
    };
  }
};
</script>
 
<style scoped>
.navigation-bar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
.navigation-bar li {
  display: inline;
  margin-right: 10px;
}
 
.navigation-bar a {
  text-decoration: none;
  color: #333;
}
 
.navigation-bar a.router-link-exact-active {
  color: #000;
  font-weight: bold;
}
</style>

这个代码实例提供了一个简单的Vue组件，用于创建一个自定义的导航栏。它使用了<router-link>来确保每个菜单项都是一个导航到对应路径的链接，并使用了v-for来循环渲染数据中的menuItems。同时，它还使用了router-link-exact-active类来标记当前激活的菜单项，从而提供视觉反馈。这个例子展示了如何将Vue.js和Vue Router结合起来创建一个响应式的导航组件。