Vue router - with links in a template string - vue.js

Question

I import some text strings from a translation API. Some of these strings contain HTML - also links. Some of these links must link to internal router links. For example some link. Clicking this link will ofcourse work - but it reloads the app, instead of pushing the link within the SPA.
What's the best method to make imported/external links act like vue-router links?

Answer 1

You really should be rendering the links with <router-link> if you want the clicks to be handled by vue-router instead of by reloading the page.
Otherwise you can intercept the clicks (via delegation) and navigate to the new route manually:
<div #click="onClick">
<!-- Render the HTML in here -->
Link
</div>
onClick(e) {
if (e.target.tagName === 'A') {
e.preventDefault();
// Manually navigate to the route
this.$router.push(e.target.href);
}
}

Answer 2

Although it is an old question I ran into the same problem yesterday and might help for future reference.
Trying the way #Decade Moon answered did not solve my problem as the href tag of an anchor comes with the window.location.origin.
So if I was at https://www.example.com/about and want to navigate to the homepage I was getting this URL https://www.example.com/about/https://www.example.com which it was not the expected result.
So my solution was to pass a data attribute in my template string:
const toHomepage = `<span data-href="/">Link to Homepage</span>`;
And then in my component:
<p #click="linkTo" v-html="link"></p>
See that the v-html directive will output my template string.
linkTo(e) {
if (e.target.dataset.href) {
this.$router.push(e.target.dataset.href);
}
}

Answer 3

A more sophisticated version of Decade's answer based on https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html:
function onClick(event: MouseEvent) {
let target = event.target as HTMLElement
while (target && target.tagName !== 'A') {
target = target.parentNode as HTMLElement
}
const href = (target as HTMLLinkElement).href
if (target && target.matches("a:not([href*='://'])") && href) {
const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event
if (metaKey || altKey || ctrlKey || shiftKey) { return }
if (defaultPrevented) { return }
if (button !== undefined && button !== 0) { return }
if (target && target.getAttribute) {
const linkTarget = target.getAttribute('target') as string
if (/\b_blank\b/i.test(linkTarget)) return
}
const url = new URL(href)
const to = url.pathname
if (window.location.pathname !== to && event.preventDefault) {
event.preventDefault()
router.push(to)
}
}