如果组件中,用iframe嵌套了别的项目地址;刚开始用vuex保存src内容,但是页面刷新后,iframe中的内容404;原因是vuex中的src没有值,所以采用浏览器缓存实现;

代码如下

<template>
  <div class="sc-demo">
    <iframe class="iframe" :src="src" ></iframe>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {},
  data () {
    return {
      src: ''
    }
  },
  name: 'demo',
  props: {},
  computed: {},
  methods: {
    ...mapActions({
      action_activeMenu: 'action_activeMenu'
    })
  },
  created () {
    // 解决路由刷新后找不到src,无法访问网页问题
    // 第一次进入该菜单
    if (!localStorage.getItem('iframeSrc')) {
      window.localStorage.setItem('iframeSrc', this.$route.params.src) // 存储
      this.src = this.$route.params.src
    } else {
      // 如果刷新本页面
      if (!this.$route.params.src) {
        this.src = localStorage.getItem('iframeSrc') // 读取
      } else {
        // 如果点击其他菜单
        this.src = this.$route.params.src
        window.localStorage.setItem('iframeSrc', this.$route.params.src)
      }
    }
  },
  mounted () {},
  watch: {}
}
</script>

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐