src\App.vue
):
<template>
<div>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header><Header/></el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer><Footer/></el-footer>
</el-container>
</el-container>
</div>
</template>
src\components\Header.vue
):
<script>
import { ref } from "vue";
export default {
setup() {
const activeIndex = ref(1);
const handleSelect = (key, keyPath) => {
console.log(key, keyPath);
};
return { activeIndex, handleSelect };
},
};
</script>
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="1">回首頁</el-menu-item>
<el-submenu index="2">
<template #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 index="2-4">
<template #title>選項4</template>
<el-menu-item index="2-4-1">選項1</el-menu-item>
<el-menu-item index="2-4-2">選項2</el-menu-item>
<el-menu-item index="2-4-3">選項3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item
index="3"
disabled
>消息中心</el-menu-item>
<el-menu-item index="4"><a
href="https://www.ele.me"
target="_blank"
>後臺管理</a></el-menu-item>
</el-menu>
</template>
<style lang="scss" scoped>
</style>