vue:点击a链接跳转一个嵌套iframe的页面

有这么一个需求：后台给的html字符串，v-html渲染出来了（左1），用户点击链接后放在iframe嵌套下的新页面

思路1：
查找所有的a标签添加οnclick="consoel.log(1234567);return false;"或@click.prevent=“consoel.log(1234567);return false;”

      let html = this.$route.query.content
      // 1.查找所有a链接的位置
      var index = html.indexOf('<a') // 字符出现的位置
      var num = 0 // 这个字符出现的次数
      var arr = []
      while (index !== -1) {
        console.log(index) // 打印字符串出现的位置
        arr.push(index)
        num++ // 每出现一次 次数加一
        index = html.indexOf('<a', index + 1) // 从字符串出现的位置的下一位置开始继续查找
      }
      console.log(num)
      // 2.添加绑定事件
      // console.log('f一共出现了' + num + '次');
      for (var i = 0; i < arr.length; i++) {
        console.log(arr[i])
        // Vue._router.push({ path: "infoDetail2", query: { url: "" } })
        this.insertStr(html, arr[i] + 2, ' οnclick="consoel.log(1234567);return false;"')
      }
      this.html = html

后面发现onclick没有被解析所以无法执行
(其实我很奇怪，普通的html页面都能执行，可能和v-html渲染有关)

< a href=“https://www.baidu.com” οnclick=“console.log(‘要执行的代码’);return false”>baidu

思路2:
转换思路了，给v-html添加点击事件，为指定元素(a标签)做处理

<div v-html="html" @click.prevent="clickFn"></div>

    clickFn (event) {
      console.dir(event.target) // testssss
      console.log(event.target.nodeName) // p
      if (event.target.nodeName === 'A') {
        // 获取触发事件对象的属性
        let href = event.target.href
        this.$router.push({
          path: 'infoDetail2',
          query: {
            src: href
          }
        })
      }
    }