×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 1,488,524명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)

크롬에서는 매우 잘 돌아가나, IE시리즈에서는 template가 제대로 동작하지 않는듯하다.


그 이유를 찾아보려 했으나 실패했고, 임시 방편으로 피하고자 하는 간단한 방법을 소개하고자 한다.


우선 Crocus 블로그에서는 mainPage(www.crocus.co.kr/)일때 메인페이지 관련된 내용을 보여주고

mainPage가 아닐때 게시물들을 보여준다.


이때 IE에서 Id 바인딩이 제대로 됐다면 그냥 진행하면 되는데 어떤 이유는지는 모르겠으나 제대로 되지 않았고 따라서 다른 편법을 살짝 이용하였다.


 if (window.location.pathname == '/') { document.write('<style>.main-on{display:"" !important;} </style>'); }


window.location.pathname가 '/'일때 즉 root가 되므로 이때는 main-on이라는 class가 display: none이 아닌 display: ""로 설정하고 이 부분을 !important를 통해 우선순위를 최상으로 당겨준다.


처음에는 crocus 블로그가 모든것을 보여주고 hiding하는 방식이었는데 


우선은 보여주지 않고 해당하는 루트를 판변하여 순차적으로 보여주도록 하면 vue JS가 제대로 동작하지 않는 오류를 막을 수 있다.



참고로 display:none는 해당 아이디의 내용이 보이지 않도록하는 것인데 이 반대의 속성값이 존재하지 않는다.


따라서 display: ""로 설정하면 된다.