<template>
<div>
<el-container>
<el-header>
<el-menu class="el-menu-demo" mode="horizontal" :router="true">
<el-menu-item index="home" ref="home">홈</el-menu-item>
<el-menu-item index="login" ref="login" v-show="!logged">로그인</el-menu-item>
<el-menu-item index="logout" ref="logout" v-show="logged">로그아웃</el-menu-item>
<el-menu-item index="mypage" ref="mypage" v-show="logged">마이페이지</el-menu-item>
<el-menu-item index="join" ref="join">회원가입</el-menu-item>
<el-menu-item index="admin" ref="admin">관리자</el-menu-item>
<el-menu-item index="board" ref="board">게시판</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>© vue project</el-footer>
</el-container>
</div>
</template>
<script>
import {useStore} from 'vuex';
export default {
created(){
},
mounted(){
console.log(window.location.pathname.substr(1));
const path = window.location.pathname.substr(1);
this.changeLogged(path);
this.store.subscribe((mutation, state)=>{
console.log(mutation, state);
if(mutation.type==='setMenu'){
const tmp = mutation.payload;
this.changeLogged(tmp);
}
});
},
data() {
return {
logged : false,
store : useStore()
}
},
methods : {
changeLogged(path){
console.log('changeLogged', path);
const token = sessionStorage.getItem("TOKEN");
if(token === null){
this.logged = false;
}
else{
this.logged = true;
}
if(typeof this.$refs[path] !== 'undefined') {
this.$refs[path].$el.click();
}
}
}
}
</script>
<style scoped>
.el-header,
.el-footer {
background-color: #ffffff;
color: var(--el-text-color-primary);
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #d3dce6;
color: var(--el-text-color-primary);
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #e9eef3;
color: var(--el-text-color-primary);
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>