Vue a element를 nuxt-link(vue-router)로 바꾸기

필자는 당시 h() domProps의 innerHTML를 사용했기에 a element를 nuxt-link component로 바꿀 필요가 있었다.

innerHTML을 사용하기에 vue로 render가 되지 않아 nuxt-link는 무의미했고, a element를 사용하자니 Vue를 사용하는 이유가 없었기 때문이었다.

 

구글링한 결과... 아래와 같은 방법을 찾았다.

import Vue from 'vue'

export default {
	mounted() {
		const anchors = this.$el.getElementsByTagName('a')

		Array.from(anchors).forEach(anchor => {
			const anchorLink = anchor.getAttribute('href')
			if (anchorLink.startsWith('http://') || anchorLink.startsWith('https://')) return
			const propsData = { to: anchorLink }
			const parent = this

			const NuxtLink = Vue.component('NuxtLink')
			const routerLink = new NuxtLink({ propsData, parent })
			routerLink.$mount(anchor).$el.innerHTML = anchor.innerHTML
		})
	}
};

if (anchorLink.startsWith('http://') || anchorLink.startsWith('https://')) return

 

해당 부분은 적절하게 수정해서 사용해면 좋을 것 같다.