笔记:vue中iframe刷新后src丢失出现404问题

 如果组件中，用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>