File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="menu flex" style="gap: 30px">
<router-link to="/MyPlan.page">
<button :class="{ active: activeButton === 'schedule' }" type="submit" @click="goToApp('schedule')">
<p :class="{ active: activeButton === 'schedule' }">학습일정계획</p>
</button>
</router-link>
<router-link to="/Dashboard.page">
<button :class="{ active: activeButton === 'dashboard' }" type="submit" @click="goToApp('dashboard')">
<p :class="{ active: activeButton === 'dashboard' }">Dashboard</p>
</button>
</router-link>
<router-link to="/MyPage.page">
<button :class="{ active: activeButton === 'mypage' }" type="submit" @click="goToApp('mypage')">
<p :class="{ active: activeButton === 'mypage' }">마이페이지</p>
</button>
</router-link>
</div>
</template>
<script>
export default {
props: {
currentRoute: {
type: String,
required: true,
},
},
data() {
return {
activeButton: '',
};
},
methods: {
goToApp(button) {
this.activeButton = button;
},
// 경로에 따른 메뉴 버튼 설정
updateActiveButton() {
if (this.currentRoute === '/MyPlan.page') {
this.activeButton = 'schedule';
} else if (this.currentRoute === '/PreviewNote.page') {
this.activeButton = '';
} else if (this.currentRoute === '/Dashboard.page') {
this.activeButton = 'dashboard';
} else if (this.currentRoute === '/MyPage.page') {
this.activeButton = 'mypage';
}
},
},
watch: {
currentRoute() {
this.updateActiveButton();
},
},
mounted() {
this.updateActiveButton();
console.log('Menu mounted');
},
};
</script>
<style></style>