File name
Commit message
Commit date
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';
}
}
},
watch: {
currentRoute() {
this.updateActiveButton();
}
},
mounted() {
this.updateActiveButton();
console.log('Menu mounted');
}
};
</script>
<style>
</style>