
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>
<nav class="main-menu">
<ul class="flex-start">
<li v-for="(menu, index) in menuList" :key="index">
<router-link :to="menu.path">{{ menu.pathName }}</router-link>
</li>
</ul>
</nav>
</template>
<script>
export default {
data() {
return {
menuList: [
{ pathName: "가공도구 마모 데이터 시각화", path: "/" ,isActive:true},
{ pathName: "물류운송 데이터 시각화", path: "/transit.page",isActive:true },
]
}
},
methods: {
selectActive: function (currentPath) {
this.menuList.forEach((item) => {
// 주요 메뉴의 path와 현재 경로를 비교
if (item.path === currentPath) {
item.isActive = true;
} else {
// 하위 메뉴가 있는 경우, 하위 메뉴의 path와 현재 경로를 비교
if (item.subMenu && item.subMenu.some(sub => sub.path === currentPath)) {
item.isActive = true;
} else {
item.isActive = false;
}
}
});
}
},
watch: {
},
computed: {
},
components: {
},
mounted() {
console.log('main mounted');
this.selectActive(this.$route.path)
}
}
</script>