vuejs-如何将原始html链接呈现 <router-link>?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (679)

我是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)
    }
  }
}

所以,当我调用启动函数时,它填充了这个.html,这个html变量驻留在一个v-html中。每个东西似乎都正常工作,我得到html并在de容器中呈现它,但是链接被破坏了,链接应该指向同一个应用程序,类似于#/test/link值,但由于它们是标记,所以在vue中,必须使用它们不工作。

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

提问于
用户回答回答于

你不应该返回原始的html。只需返回路由的路径,然后循环路径并以这种方式创建链接。

你可以使用v-htmlVue指令输出原始html。

https:/jsfiddle.net/eysww8t/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>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励