时间戳

首页 > 解决方案 > Vuejs - 将原始 html 链接渲染到

javascript - Vuejs - 将原始 html 链接渲染到

问题描述

我是 VueJS 的新手，我正在做一些奇怪的实验。我使用 python/flask 构建了一个后端服务，这个后端为我提供了一串带有许多标签的 html 代码，我想在我的 Vue 应用程序中呈现它，我有一个调用后端的方法，如下所示：

async execute (method, resource, data) {
    return client({
      method,
      url: resource,
      data: data
    }).then(async req => {
      return req.data.html
    })
  },
  callBack (id) {
    console.log(id)
    return this.execute('post', '/content/', {body: { 'id': id }})
  }

在 .vue 文件中，我有：

export default {
  data () {
    return {
      loading: false,
      launch: [],
      html: 'none',
      page: this.$route.params.article
    }
  },
  beforeMount () {
    console.log('beforeee')
    this.html = api.callBack(this.page)
  },
  methods: {
    async launch () {
      this.launch = ''
      this.html = await api.callBack(this.page)
    }
  }
}

因此，当我调用启动函数时，它会填充 this.html，并且此 html 变量位于 v-html 中。似乎一切正常，我获取 html 并将其呈现在 de 容器中，但链接已损坏，链接应指向相同的应用程序类似于#/test/linkvalue，但由于它们是标签，并且在 vue 中你必须使用它们不起作用。

有一种方法可以实现这种“动态重新路由”，还是我做的事情太奇怪了？链接很多，因为它们是从网络上抓取的，所以手动解析不是一种选择。

JSFiddle

在此先感谢您的帮助

标签： javascripthtmlvue.jsfrontend

解决方案

此外，您不应返回原始 html。只需返回路线的路径，然后循环路径并以这种方式创建链接。

您可以使用v-htmlvue 指令输出原始 html。

https://jsfiddle.net/eywraw8t/66262/

new Vue({
  el: "#app",
  data: {
    rawhtml: "<h1 style='color: red;'>Hi, I am raw html.</h1>"
  },
  methods: {    
  }
})


<div id="app">
  <div v-html="rawhtml"></div>
</div>

推荐阅读