element的导航栏的具体使用

Element是一个基于Vue.js的UI组件库，它提供了丰富的组件来帮助我们快速构建前端页面。其中包括导航栏组件。下面是使用Element导航栏的具体步骤：

1. 安装Element组件库，可以使用npm或者yarn进行安装。

2. 在项目中引入Element组件库。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在Vue组件中使用导航栏组件。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title">导航一</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3">导航二</el-menu-item>
  <el-menu-item index="4">导航三</el-menu-item>
</el-menu>

其中，el-menu表示导航栏组件，el-menu-item表示导航栏中的一个菜单项，el-submenu表示导航栏中的一个子菜单项。

4. 在Vue组件中定义activeIndex和handleSelect方法。

data() {
  return {
    activeIndex: '1'
  }
},
methods: {
  handleSelect(key, keyPath) {
    console.log(key, keyPath)
  }
}

其中，activeIndex表示当前激活的菜单项的index值，handleSelect方法用于处理菜单项的点击事件。

这样就完成了Element导航栏的使用。