vue项目如何优雅地打开iframe

Question

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

Answer 1

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

<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>

Answer 2

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

Answer 3

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