在vue项目中引入第三方样式并能够保留状态

问题描述

在一个项目中遇到这样一个问题：在vue项目中，通过组件跳转，可以进入第三方的页面，并且路由跳转离开该网页再回来时仍然要保留第三方的页面的状态。

思考

若是在vue项目中的自己组件之间进行路由跳转，可以通过keep-alive 属性来达到缓存的效果，但是，这个是第三方的网页，我们需要使用iframe标签的src属性来引进第三方的网页，当我们对第三方的网页进行搜索之后，将会在基本的src上加上一系列的参数，若是我们离开该网页再回来后，若是src没有进行改变，那么会重新加载到主页面
例如：我们使用iframe加载 http:www.baidu.com ，我们在搜索框进行搜索，那么该url会添加一长串的参数。

---

这样是不行的，所以在router-view中渲染iframe的话只能实时获取src后面的参数，这样可能会比较麻烦，因为我们操作第三方的页面使其路由变化，但是并不会影响到我们vue本身的url路径，所以这个方法的难度挺大。

实现后的效果

实现思路

在基组件中（如我项目中的pro-layout）中，加入iframe的标签，并且设置一个flag来决定iframe是否显示和隐藏。我们在配置路由时，为要跳转至第三方页面的路由配置传入一个meta，再检测有没有这个字段来修改falg的值即可。

核心思路：这个方法充分利用了vue中v-show的特性，v-show就类似于css中的visiable，当v-show为false时，它并不会显示出来，但实际上还是保存在dom树中，并不会被销毁。所以就可以实现保留状态。

核心代码

1. route的配置

{
   
        path: '/iframes',
        name: 'iframes',
        redirect: '/iframes/baidu',
        component: KeepAliveRoute,
        meta: {
   
          title: 'Iframes',
          icon: 'github'
        },
        children: [
          {
   
            path: 'baidu',
            component: () => import('@/views/iframes/baidu/baidu.vue'),
            name: 'Baidu',
            meta: {
    title: 'Baidu', icon: 'github', iframe: {
    src: 'http://www.baidu.com' } }
          },
          {
   
            path: 'jd',
            component: () => import('@/views/iframes/jd/jd.vue'),
            name: 'JD',
            meta: {
    title: 'JD', icon: 'github', iframe: {
    src: 'http://www.jd.com' } }
          },
          {
   
            path: 'taobao',
            name: 'taobao',
            meta: {
    title: 'taobao', icon: 'github', iframe: {
    src: 'http://www.taobao.com' } },
            component: () => import('@/views/iframes/jd/jd.vue')
          }
        ]
      }
    ]
  }

2.Iframe组件的封装（显示v-show为true的iframe）

<template>
  <div
    v-show="true"
    class="iframe-box"
  >
    <iframe
      v-for="( value ) in iframeList"
      v-show="value.show"
      :key="value.path"
      :src="value.src"
      frameborder="0"
      width="100%"
      height="400px"
    />
  </div>
</template>
<script>
export default {
   
  name: 'IframeBox',
  data() {
   
    return {
   
      iframeList: [],
      showList: []
    };
  },
  watch: {
   
    $route: function (newVal, oldVal) {
   
      console.log('route is change');
      console.log(oldVal);
      console.log(newVal);
      console.log(oldVal.meta.iframe);
      if (oldVal.meta.iframe) {
   
        this.hiddenIframe(oldVal.fullPath);
      }
      if (newVal.meta.iframe) {
   
        this.addIframe(newVal);
      }
      console.log('new log');
      console.log(this.iframeList);
    }
  },
  created() {
   
    if (