[Vue.js] 전역으로 선언 된 것 거꾸로 찾아가는 법...엥?

2022. 7. 5. 17:18Front-end

반응형

쿠폰 번호를 누르면 쿠폰 상세보기 모달창이 뜨는 기능을 추가했다. 

그런데 모달창 옆에 사이드메뉴가 달려있다...난 이런 거 만든적이 없는데? 

심지어 다른 모달창에는 사이드메뉴가 없이 모달창만 깔꼼하게 뜨는데...

프로젝트 중간에 투입한 상황에서, 그 기능이 어디에 만들어져있는지 모를 때 이렇게 찾아가면 된다.

 

1. 사이드메뉴가 내가 설정을 해놓지도 않았는데 저절로 달려있다라... 그럼 뭐다? 전역이다!

2. vue에서 전역은 두군데를 보면된다. 어디?

- App.vue

- main.js

이 두군데!!!

3. App.vue, main.js를 들어가서 import를 보면서 의심스러운 곳을 타고타고 들어가면 된다.

 

이렇게 해서 오게 된 layout>index.vue 파일에서 

<sidebar v-if="showSideMenu" class="sidebar-container"/>

showSideMenu가 의심스럽군...컨트롤 누르면서 클릭! 따라가보자!

showSideMenu() {
  return this.needTagsView && !this.isHide
},

is.Hide 따라가보자!

isHide() {
  return this.sideHideMenuList.filter(menu => this.$route.name === menu).length > 0
}

sideHideMenuList !

sideHideMenuList: [
  'customer/active/detail',
  'customer/inactive/detail',
  'customer/withdrawal/detail',
  'order/history/detail',
]

찾았다 요녀석! 여기에 안뜨게 할 route의 name만 추가해주면 되겠군! 

router에 가서 name을 보자!

{
  path: '/coupon/use/:customerOrderNo/:ecpnNo',
  component: () => import('@/views/contents/ecoupon/use/useCouponCodeDetail'),
  name: 'coupon/use/couponCodeDetail',
  hidden: true,
  meta: { title: 'couponCodeDetail', noCache: true, activeMenu: 'coupon/use' }
}

 'coupon/use/couponCodeDetail' 을 확인! 추가해주자~!

sideHideMenuList: [
  'customer/active/detail',
  'customer/inactive/detail',
  'customer/withdrawal/detail',
  'order/history/detail',
  'coupon/use/couponCodeDetail'
]

성공!

모달창에 사이드메뉴가 안뜨고 깔꼼하게 모달창만 떴다! 

반응형