MecuryJerry 2022-01-10 09:31 采纳率: 75%
浏览 98
已结题

vue项目如何优雅地打开iframe

因为业务需要,在vue项目中集成其他页面(不止一个),就比如给个src,我点击导航栏需要跳到某个页面(可能是我写的页面,也可能是外部页面)。请问有没有相关文档或者文章借鉴一下。

  • 写回答

3条回答 默认 最新

  • ZionHH 2022-01-10 11:12
    关注

    判断链接来切换路由还是iframe

    img

    <template>
      <div>
        <ul>
          <li v-for="(item, index) in menu" :key="index" @click="handleTo(item.url)">{{item.name}}</li>
        </ul>
        <router-view v-if="inside"></router-view>
        <iframe v-else :src="iframeSrc"></iframe>
      </div>
    </template>
    
    <script>
    
    export default {
      data () {
        return {
          menu: [
            { url: '/about', name: '关于' },
            { url: 'https://www.csdn.net', name: 'CSDN' }
          ],
          inside: true,
          iframeSrc: ''
        }
      },
      methods: {
        handleTo (url) {
          if (url.includes('http')) {
            this.iframeSrc = url
            this.inside = false
          } else {
            this.$router.push(url)
            this.inside = true
          }
        }
      }
    }
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 禅思院 前端领域优质创作者 2022-01-10 09:44
    关注

    再路由上加个属性 判断这个地址是不是外链地址 就行啦

    评论
  • 韩旭在努力 前端领域新星创作者 2022-01-10 10:14
    关注

    可以参考一下 总的来说就是根据某个值判断一下当前是外链还是 内部组件

    img

    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月15日
  • 已采纳回答 7月7日
  • 创建了问题 1月10日

悬赏问题

  • ¥60 悬赏求解,通过实时现场摄像头的视频图像识别其他对家打出的麻将牌,识别麻将牌,识别牌墙位置,通过识别对家打出了什么牌
  • ¥15 关于#GPU jetson#的pcie驱动开发问题,如何解决?
  • ¥15 stm32f103zet6 串口5无法收发数据
  • ¥15 关于C语言使用线程队列实现多线程并发
  • ¥15 这个运行,错误在哪里呀,大家看看吧,教导我
  • ¥15 advanceinstaller对话框设置
  • ¥100 正常上网,内部网页无法打开
  • ¥15 组件库引入并使用在若依框架未展示
  • ¥149 关于#使用python 的Flash Echarts+ajax+mysql动态数据实现饼图#的问题,请各位专家解答!
  • ¥15 RichTextBox中追加文本时报错