如何通过vue element 写一个导航栏
时间: 2023-06-12 18:02:07 浏览: 154
Vue实现导航栏菜单
4星 · 用户满意度95%
你可以通过 Vue-Router 和 ElementUI 库来实现一个带导航栏的单页应用程序。以下是大致的步骤:
1. 在 Vue 项目中引入 Vue-Router 和 ElementUI 库:
```
npm i vue-router element-ui -S
```
2. 在 Vue 入口文件中注册 ElementUI 插件:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
3. 在 Vue-Router 中定义路由表:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
// ...
]
})
```
4. 在 Vue 组件中使用 ElementUI 的导航栏组件:
```html
<template>
<el-header>
<el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect">
<el-menu-item index="/">Home</el-menu-item>
<el-menu-item index="/about">About</el-menu-item>
<!-- ... -->
</el-menu>
</el-header>
</template>
<script>
export default {
methods: {
handleSelect(index) {
this.$router.push(index)
}
}
}
</script>
```
在这里,我们使用 `el-menu` 组件定义导航栏,根据当前路由的路径设置 `default-active` 属性高亮对应的导航菜单项。使用 `@select` 事件监听导航菜单的选择事件,并使用 `$router.push()` 方法进行路由跳转。
阅读全文