如何在 vue js 中动态添加路由器链接

Question

我面临着一个非常有趣的问题。我从服务器返回一些 html 作为 json。我的返回 html 字符串看起来像这样

str2: " <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">numan sir</router-link> </span></span>, <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">sadek mia</router-link> </span> and 4 of your firiends commented on this post"

这是从服务器返回的。现在我想添加一些水疗链接。

它可以是nuxt link, @click event for routing or a </router-link>

我在我的前端使用 v-html 来输出 html。它确实正确输出。

有没有这样做？

谢谢。

Answer 1

正如评论中所说，最好使用结构化的 JSON 数据从您的服务器进行响应。但是，您可以使其工作，但您需要使用 <component></component> .如果您有router-link，仅使用v-html是行不通的：

<div id="app">
  <component :is="{template: theString}"></component>
</div>
new Vue({
    el: '#app',
  data: {
    theString: '<h3>Something Cool</h3>'
  }
})

https://jsfiddle.net/to8smxfb/

PS：您还需要确保theString仅包含一个根元素。例如，您可以将字符串包装成<div></div>。