vue2+element-ui创建顶部导航栏及下拉菜单

引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store定义logout方法

引入顶部导航栏

创建client/src/components/HeadNav.vue顶部导航栏组件：

<template><header class="head-nav"><el-row><el-col :span="6" class="logo-container"><img src="../assets/logo.png" class="logo" alt="" /><span class="title">马马虎虎资金管理系统</span></el-col><el-col :span="6" class="user"><div class="userinfo"><img src="user.avatar" class="avatar" alt="" /><div class="welcome"><p class="name comename">欢迎</p><p class="name avatarname">褪色者</p></div><span class="username"><!--下拉菜单--></span></div></el-col></el-row></header></template><script>export default {name: "head-nav"};</script><style scoped>.head-nav {width: 100%;height: 60px;min-width: 600px;padding: 5px;background: #324057;color: #fff;border-bottom: 1px solid #1f2d3d;}.logo-container {line-height: 60px;min-width: 400px;}.logo {height: 50px;width: 50px;margin-right: 5px;vertical-align: middle;display: inline-block;}.title {vertical-align: middle;font-size: 22px;font-family: "Microsoft YaHei";letter-spacing: 3px;}.user {line-height: 60px;text-align: right;float: right;padding-right: 10px;}.avatar {width: 40px;height: 40px;border-radius: 50%;vertical-align: middle;display: inline-block;}.welcome {display: inline-block;width: auto;vertical-align: middle;padding: 0 5px;}.name {line-height: 20px;text-align: center;font-size: 14px;}.comename {font-size: 12px;}.avatarname {color: #409eff;font-weight: bolder;}.username {cursor: pointer;margin-right: 5px;}.el-dropdown {color: #fff;}</style>

在Index.vue中引入顶部导航栏组件：

<template><div class="index"><HeadNav></HeadNav></div></template><script>import HeadNav from "../components/HeadNav"export default {name: 'index',components: {HeadNav}};</script>

使用下拉菜单

编辑HeadNav.vue，利用Element-ui创建下拉菜单：

<span class="username"><!--下拉菜单--><el-dropdown trigger="click" @command="setDialogInfo"><span class="el-dropdown-link"><i class="el-icon-caret-bottom el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="info">个人信息</el-dropdown-item><el-dropdown-item command="logout">退出</el-dropdown-item></el-dropdown-menu></el-dropdown></span>

获取Vuex store数据

编辑HeadNav.vue，通过Vuex获取存储的用户token，在导航栏展示用户名和头像。

<template><header class="head-nav"><el-row><el-col :span="6" class="logo-container"><img src="../assets/logo.png" class="logo" alt="" /><span class="title">马马虎虎资金管理系统</span></el-col><el-col :span="6" class="user"><div class="userinfo"><img :src="user.avatar" class="avatar" alt="" /><div class="welcome"><p class="name comename">欢迎</p><p class="name avatarname">{{user.name}}</p></div><span class="username"><!--下拉菜单--><el-dropdown trigger="click" @command="setDialogInfo"><span class="el-dropdown-link"><i class="el-icon-caret-bottom el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="info">个人信息</el-dropdown-item><el-dropdown-item command="logout">退出</el-dropdown-item></el-dropdown-menu></el-dropdown></span></div></el-col></el-row></header></template><script>export default {name: "head-nav",computed: {user() {return this.$store.getters.user;}}};</script>

配置Vuex store

编辑client/src/store/index.js，定义下拉菜单中退出时清除登录状态使用的actions：

const actions = {setAuthenticated: ({commit }, isAuthenticated) => {commit(types.SET_AUTHENTICATED, isAuthenticated);},setUser: ({commit }, user) => {commit(types.SET_USER, user);},clearCurrentState: ({commit }) => {commit(types.SET_AUTHENTICATED, false);commit(types.SET_USER, null);}};

定义logout方法

在HeadNav.vue中定义点击下拉菜单退出时使用的logout方法：

<script>export default {name: "head-nav",computed: {user() {return this.$store.getters.user;}},methods: {setDialogInfo(cmdItem) {//console.log(cmdItem);switch (cmdItem) {case "info":this.showInfoList();break;case "logout":this.logout();break;}},showInfoList() {console.log("个人信息");},logout() {//清除tokenlocalStorage.removeItem('eleToken');//设置Vuex storethis.$store.dispatch('clearCurrentState');//跳转到登录页面this.$router.push('/login');}}};</script>