<template> <div v-if="isAdminPage" v-cloak class="admin-wrap"> <AdminHeader /> <AdminMenu /> <main class="main-wrap"> <div :class="{'content-wrap': true, 'main': this.$route.path === this.$filters.ctxPath('/adm/main.page')}" :style="{ height: menuUse === 'Y' ? 'calc(100% - 152px)' : '100%' }"> <router-view /> </div> <MenuSatisfaction v-if="!$route.path.includes('/insert.page')" @menuChecck="menuYnCheck"/> <!-- 내용 확인용 --> </main> </div> <div v-else v-cloak class="user-wrap relative"> <UserHeader v-if="path != this.$filters.ctxPath('/login.page') && !$route.path.includes('/popup.page')"/> <main class="main-wrap"> <Breadcrumb v-if="$route.path !== this.$filters.ctxPath('/adm/main.page') && $route.path !== this.$filters.ctxPath('/main.page')" /> <router-view /> <MenuSatisfaction v-if="!$route.path.includes('/insert.page')"/> </main> </div> </template> <script> import UserHeader from "../layout/UserHeader.vue"; import AdminHeader from "../layout/AdminHeader.vue"; import AdminMenu from "../layout/AdminMenu.vue"; import Breadcrumb from "../component/Breadcrumb/Breadcrumb.vue"; import MenuSatisfaction from "../layout/MenuSatisfaction.vue"; const App = { data: () => { return { otherWindow: false, path: "", menuUse: "N", }; }, methods: { // 메뉴 만족도 조사 사용 여부 menuYnCheck(yn) { // console.log("menuYnCheck", yn); this.menuUse = yn; }, }, watch: { $route(to, from) { this.path = to.path; if(this.path.includes('/insert.page') || this.path.includes('/view.page')) { this.menuUse = "N"; } }, }, computed: { isAdminPage() { // 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단 return this.$route && this.$route.path.startsWith(this.$filters.ctxPath("/adm")); }, }, components: { 'UserHeader': UserHeader, 'AdminHeader': AdminHeader, 'AdminMenu': AdminMenu, 'Breadcrumb' : Breadcrumb, 'MenuSatisfaction': MenuSatisfaction, }, mounted() {}, }; export default App; </script> <style scoped> [v-cloak] { display: none; } </style>