vue内嵌html

 httpGetData () {
      
      //  getUserInfo().then(res => {
      //     if (isSuccess(res)) {
           
      //       this.userAccount=res.body.userAccount;
      //       window.location.href='http://ssc-app.telecomjs.com/ssc-annualReport/annualReport.html?username='+this.userAccount;
      //   }
      //  })
      this.$router.push({path:"/annualReport"});
    },

注释部分一开始是将访问的资源放在服务器上，往其传递参数，然后 资源在服务器上接收后通过ajax访问数据库进行数据展示。但是效果却是跳转到一个网页去展示，可是需求是在原有的前端界面中展示，因此可以通过iframe框架来进行实现。通过路由进行界面跳转，路由配置就不展示了，展示跳转过后的界面代码。

<template>
  <div>
    <div class="weui-header" style="background-color: white;width:100%;z-index:9;border-bottom:1px solid #F5F5F5">
      <div class="weui-header-left back-icon-btn" @click="navigateBack"
        style="height: 46px;width: 36px;display: flex;align-items: center;justify-content: center; top: 0;left: 10px;">
        <img :src="imgbaseUrl+'img/public/icon-back.png'" alt="">
      </div>
      <h1 class="weui-header-title" style="font-size: 18px;color: #000000;">年度账单</h1>
    </div>
    <div class="frameDiv" >
      <iframe style="width:100%;height:100%" :src="frameUrl" ></iframe>
    </div>
    
  </div>
</template>
<script>
import { imgbaseUrl } from '@/config'
import { getUserInfo } from '@/api/mine'
import { isSuccess } from '@/lib/util'
export default {
  computed: {
    imgbaseUrl () {
      return imgbaseUrl
    }
  },
  data () {
    return {
      frameUrl: 'http:/服务器的html地址?username='
    
    }
  },
  methods: {
    navigateBack () {
      this.$router.back(-1)
    }
  },
  created(){
    getUserInfo().then(res => {
      if (isSuccess(res)) {
        this.frameUrl = '服务器的html地址？username='+res.body.userAccount;
     
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.frameDiv{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 40px;
}
</style>