Vus.js·Î °³¹ßÁß¿¡ °¢ ÆäÀÌÁö¸¶´Ù ogű׸¦ Àû¿ëÇÏ·Á°íÇÕ´Ï´Ù.
¿¹¸¦µé¸é,
Á¦¸ñ : °³¹ßÀÚÆ÷·³
º»¹® : °³¹ßÀÚÆ÷·³ ¸¸½¦ÀÌ
ÀÌ·±½ÄÀÇ °Ô½Ã±ÛÀÌ ÀÖ°í °Ô½Ã±ÛÀ» Ŭ¸¯Çؼ »ó¼¼ÆäÀÌÁö¿¡ Á¢±ÙÇß´Ù°í °¡Á¤ÇÏ°Ú½À´Ï´Ù.
¿ì¼± Çì´õ ¸ÞŸÅ±׿¡´Â ÀÌ·±½ÄÀ¸·Î ÀÛ¼ºÀ»Çصΰí
<meta name="title" id="meta_title" content="">
<meta name="description" id="meta_description" content="">
<meta name="keywords" id="meta_keywords" content="">
<meta property="og:site_name" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" id="meta_og_url" content="" />
<meta property="og:title" id="meta_og_title" content="" />
<meta property="og:description" id="meta_og_description" content="" />
<meta property="og:image" id="meta_og_image" content="" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
ÇØ´çÆäÀÌÁö¿¡¼ axios·Î Åë½ÅÀ»ÇÑÈÄ
axios({
method: 'get',
url: this.url,
params : this.boardDetailParam
})
.then(function (response) {
this.resultDatas = response.data;
setTimeout(() => {
commonVue.setMeta(this.resultDatas.data.title);
}, 100);
}.bind(this))
.catch(function(e) {
});
Åë½ÅÀÌÈÄ ºñµ¿±âó¸®ÇϱâÀ§ÇØ setTimeoutÀÌÈÄ
commonVue.setMeta(this.resultDatas.data.title);
ÀÌ·±½ÄÀ¸·Î °øÅ밴ü¿¡ ÇØ´ç °Ô½Ã±ÛÀÇ Á¦¸ñÀ» ³Ñ±é´Ï´Ù.
commonVue
setMeta : function (title) {
document.title = title;
document.getElementById('meta_title').setAttribute('content', title);
document.getElementById('meta_description').setAttribute('content', title);
document.getElementById('meta_og_url').setAttribute('content', location.href);
document.getElementById('meta_og_title').setAttribute('content', title);
document.getElementById('meta_og_description').setAttribute('content', title);
}
±×·³ °øÅëÇÔ¼ö °´Ã¼¿¡¼ ÇØ´ç Á¦¸ñÀ» ¸ÞŸÅ±׿¡ setAttributeÇÏ´Â ¹æ½ÄÀ̱¸¿ä.
ÀÌ·±½ÄÀ¸·Î ±¸¼ºÀ»ÇÏ¿´´õ´Ï ½ÇÁ¦ À¥¿¡¼ ¼Ò½º¸¦ º¸¸é ¸ÞŸÅ±װ¡ setµÇ¾îÀÖ±äÇѵ¥
Ä«Ä«¿ÀÅå°°Àº ¼Ò¼È¸Þ½ÅÀú¿¡¼ ÇØ´ç urlÀ» º¸³»¸é ogűװ¡ Àû¿ëµÇÁö¾ÊÀºÇüÅ·Π¸Þ¼¼Áö°¡ ÀÛ¼ºµË´Ï´Ù.
Ȥ½Ã ogű׸¦ °¢ ÆäÀÌÁö¸¶´Ù ¼³Á¤ÇϽźеéÀÌ °è½Å´Ù¸é
¾î¶²¹æ½ÄÀ¸·Î ¶óÀÌÇÁ»çÀÌŬÀ» ÀâÀ¸¼Ì´ÂÁöÁ» ¾Ë°í½Í½À´Ï´Ù~ |
À¥°³¹ßÀÚ 2³âÂ÷Àε¥ CSR, SSR¿¡ ´ëÇÑ °³³äÀ» ¸ô¶ú´Ù´Â°Í¿¡ âÇÇÇϳ׿ä..
´õ±º´Ù³ª view´ÜÀº Ç×»ó CSR¹æ½ÄÀ¸·Î
µ¥ÀÌÅÍÅë½Å¸¸ API¸¦ ÅëÇÑ SSR¹æ½ÄÀ¸·Î °³¹ßÀ»ÇؿԴµ¥,
view´Ü¿¡ ¸®¼Ò½º±îÁö ¸Å ÆäÀÌÁö¸¶´Ù ¼¹ö´Ü¿¡¼ ³Ñ°ÜÁشٴ °³³äµµ Èï¹Ì·Ó±¸¿ä.
ÇØ´ç ³»¿ëÀ» ´õ ½ÉµµÀÖ°Ô °øºÎÇغÁ¾ßÇÒ°Í°°³×¿ä.. °¨»çµå¸³´Ï´Ù^^