定义顶部导航菜单
CloudTabHead.vue
注意,这里不要用<el-header>或者<el-container>之类的标签去包装,不然你在用的时候会出现错乱,还有可能导致
Component template should contain exactly one root element的错误(这是因为一个template模板只能有一个根<div>,可以认为也不能出现两个根<el-container>。
<template>
<el-menu class="el-menu-header" mode="horizontal" @select="handleSelect">
<el-menu-item index="1"><router-link :to="{ path: '/cloud/index' }">首页</router-link></el-menu-item>
<el-menu-item index="2"><router-link :to="{ path: '/cloud/list' }">服务器列表</router-link></el-menu-item>
<el-menu-item index="3">控制台</el-menu-item>
<el-menu-item index="4">消息中心</el-menu-item>
<el-menu-item index="5"><router-link :to="{ path: '/cloud/about' }">关于我们</router-link></el-menu-item>
<el-menu-item>
<el-dropdown>
<span class="el-dropdown-link">
{{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="toLogout">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</template>
<script>
import { mapMutations } from 'vuex';
import store from '../store'
export default {
name: "CloudTabHead",
data() {
return {
username: store.getters.userName,
}
},
methods: {
...mapMutations(['changeLogin']),
toLogout() {
localStorage.removeItem('Authorization');
localStorage.removeItem('Username');
this.$router.push(
{
path: "/cloud/login",
}
)
},
}
}
</script>
<style scoped>
.el-menu-header {
float: right;
/*margin-right: 200px;*/
/*width: 100%;*/
/*text-align: right;*/
}
a {
text-decoration: none;
}
.router-link-active {
text-decoration: none;
}
</style>
在其他组件中使用
CloudTest.vue
<el-container style="height: 620px; border: 1px solid #eee">
<el-header>
<CloudTabHead></CloudTabHead>
</el-header>
</el-container>
引入组件
<script>
import CloudTabHead from "./CloudTabHead";
var _this = {};
import store from '../store'
import {formatDate} from '../utils/formatDate.js'
import HighCharts from 'highcharts'
import CloudTabHead from "./CloudTabHead";
export default {
name: "CloudTest",
components: { CloudTabHead },
data() {
return {
}
}
}
</script>