高能预警！使用Vue和ElementUI打造顶尖导航栏，页面跳转一气呵成！

2023-01-26 16:05:59

使用 Vue 和 ElementUI 创建美观实用的头部导航栏

在现代网络世界中，头部导航栏是网站和应用程序不可或缺的元素。它不仅提供便捷的页面跳转，还能展示企业的品牌形象和风格。本文将指导你如何利用 Vue 和 ElementUI 这两个强大的框架来创建既美观又实用的头部导航栏。

集成 ElementUI

要使用 ElementUI，首先在项目中安装它：

npm install element-ui -S

然后，在 main.js 文件中导入：

import ElementUI from 'element-ui'
Vue.use(ElementUI)

创建导航栏组件

创建一个 Header 组件来表示导航栏：

<template>
  <div class="header">
    <el-menu mode="horizontal">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">关于我们</el-menu-item>
      <el-menu-item index="3">产品</el-menu-item>
      <el-menu-item index="4">联系我们</el-menu-item>
    </el-menu>
  </div>
</template>

在 `App.vue` 中使用

在 App.vue 中使用该组件：

<template>
  <Header />
  <!-- 其他内容 -->
</template>

配置路由

配置路由以便导航栏菜单项跳转到相应页面：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/products', component: Products },
  { path: '/contact', component: Contact }
];
const router = new Router({ routes });
export default router;

绑定路由跳转事件

为导航栏菜单项绑定路由跳转事件：

<el-menu-item :index="1" @click="handleClick">首页</el-menu-item>

methods: {
  handleClick(index) {
    const path = ['/', '/about', '/products', '/contact'][index - 1];
    this.$router.push(path);
  }
}