Dynamic router-link

Viewed 9610

I developed some kind of blog with VueJS and VueRouter. So I have a markdown editor in the administration in order to add blog posts.

My problem is: How to make router-links work with dynamic content?

For the time being, I can only add classic <a href="...">foo</a> with the editor. And when the content gets rendered, it's a classic link so when a visitor clicks on the link, the entire website gets reloaded to display the content of the targeted link.

I think that the behaviour I'm looking for is to transform the internal links into router-link and the external links into classic links.

What is your strategy to achieve that in your projects, did someone had ever been confronted to that problem?

Thank you for your advices or ideas.

I explained my problem in a small JSFiddle if you want to see what I talk about: http://jsfiddle.net/El_Matella/museptre/1/

const Home = { 
  template: '<div>Home <div v-html="dynamicContent"></div></div>',
  data () {
    return {
        dynamicContent: '<router-link to="/foo">This is a dynamic link</router-link> and <a href="https://google.com" target="_blank">and this is a classic link</a>'
    }
  }
}

will only render the classic link

2 Answers

Maybe kind of a hack, but I managed to work around this by adding an onclick attribute forcing the router to pick the link and preventing the page from reloading :

 <a href="/the-link/" target="_self" onclick="event.preventDefault(); 
 app._router.push('/the-link/');">Some text.</a>
Related