Vue中iframe保持活动状态（不刷新）

Posted 2023-03-29

参考技术A 前言：

提起vue的缓存，大家第一时间想到的一定是keep-alive，但是了解keep-alive缓存原理的都知道是将节点信息保留在VNode中的组件中（在内存中），并在需要渲染时从VNode渲染到真实DOM。iframe页面中的内容不属于该节点的信息，因此使用keep-alive仍会重新呈现iframe中的内容。但公司很多的项目涉及报表，报表都是以iframe的形式渲染的。

解决思路：

既然keep-alive只对节点信息有缓存，可以考虑在Vue的route-view节点上做点什么吗？切换非iframe页面时，它利用Vue路由；切换iframe页面时，它利用v-show切换显示和隐藏，这样就不会删除iframe节点，从而可以保持iframe状态。

做法：

router下的index.js

引入iframe页面

路由配置

在router-view页面

  <div id = "index">

    <Header />

    <keep-alive>

      <router-view />

    </keep-alive>

    <!-- iframe page -->

        <component

            v-for="item in hasOpenComponentsArr"

            :key="item.name"

            :is="item.name"

            v-show="$route.path === item.path"

        ></component>

    <Footer />

  </div>

</template>

<script>

  import Header from '@/views/homePage/homePage_Header'

  import Footer from '@/views/homePage/homePage_Footer'

  import Vue from 'vue'

  export default 

    name: "index",

    components : Header,Footer,

    created() 

      const routes = this.$router.options.routes;

        const componentsArr = this.getComponentsArr(routes);

        componentsArr.forEach((item) => 

            Vue.component(item.name, item.component);

        );

        this.componentsArr = componentsArr;

        this.isOpenIframePage();

    ,

    data() 

        return 

          iframeArr:[],

          componentsArr: []

        

    ,

    watch: 

        $route() 

            this.isOpenIframePage();

        

    ,

    computed: 

        hasOpenComponentsArr() 

            return this.componentsArr.filter(item => item.hasOpen);

        

    ,

    methods: 

        isOpenIframePage() 

            const target = this.componentsArr.find(item => 

                return item.path === this.$route.path

            );

            if (target && !target.hasOpen) 

                target.hasOpen = true;

            

        ,

        getComponentsArr(routes)       

             routes.map( it => 

               if(it.iframeComponent)

                 const name = it.name || it.path.replace('/', '');

                 this.iframeArr.push(

                  name: name,

                  path: it.path,

                  hasOpen: false,

                  component: it.iframeComponent

                 )

               

               if(it.children&&it.children.length>0)

                 this.getComponentsArr(it.children)

               

             )   

             return  this.iframeArr

        

    

  

</script>

<style scoped>

</style>                                                   

结语：

文章参看至： https://programmer.help/blogs/keep-alive-no-refresh-for-iframe-in-vue.html

如果大家有好的思路，欢迎交流讨论

vue登录刷新回到首页的问题

参考技术A F5刷新vue重新载入页面，跟路由跳转不同，路由跳转的时候vuex的数据是保留的，页面重载后数据销毁，这时我们想保持登录状态就需要将登录信息如用户信息role、token值保存在cookie或localStorage中，在brforeRouter时根据用户信息来保持登录状态。同时保存在vuex中的动态路由也将因为刷新而失效，为了安全我们不讲路由保存在cookie中，而是通过cookie中的role对路由重新进行挂载。不过这也不安全，暂时搁置

此外在App.vue上，每次重载会构建，刷新回到首页的操作