vue-element-admin内嵌html页面

1）第一种，留取左侧路由菜单栏 （以iframe内嵌的形式嵌入html文件）

此种方法可保留左侧菜单和上方面包屑

1.src/router/index.js添加左侧菜单路由，（博客内有添加路由的方法）

2.src/views添加对应的路由跳转页面

3.在该页面添加

<div>
<iframe
     ref="iframe"
     :src="htmlSrc"
     frameborder="0"
 />
</div>
export default {
  data() {
    return {
      htmlSrc: 'xxx.html'  //该页面在public文件夹下
    }
  }
}

2）第二种，不考虑左侧菜单和上部面包屑。跳转页面占全屏,只保留最上部标题和下部导航栏

1.在src/views下创建文件夹public，并创建index.vue页面

2.找到router.js，其内添加路由：

  {
    path: '/xxx',
    //component: Layout   //该方法与上面方法的区别就在于这里，
    //Layout是全局框架，组件不含Layout。添加路由后所import的页面就不会在框架内，而是占据全屏
    component: () => import('@/views/public/index')
  },

3.在index.vue页面内嵌html：

<div>
<iframe
    ref="iframe"
    :src="htmlSrc"
    frameborder="0"
/>
</div>
export default {
  data() {
    return {
      htmlSrc: 'xxx.html'
    }
  }
}

若想对其封装

1）在src/components/phone下新建一个IframeHtml.vue页面

该页面存放内嵌html的一些标签属性

2）div内加上标签<iframe>,为了使其能够在以后动态的添加html页面

    <iframe
      ref="iframe"
      :src="htmlSrc"
      width="100%"
      height="50%"
      frameborder="0"
    />

并为其加上props属性

export default {
  name: '',
  props: {
    changeHtml: {
      type: String
    }
  },
  data() {
    return {
      htmlSrc: this.changeHtml   对外暴露的changeHtml重新赋给htmlSrc，实现页面内嵌
    }
  }
}

IframeHtml.vue

<template>
  <div>
    <iframe
      ref="iframe"
      :src="htmlSrc"
      width="100%"
      height="50%"
      frameborder="0"
    />
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    changeHtml: {
      type: String
    }
  },
  data() {
    return {
      htmlSrc: this.changeHtml
    }
  }
}
</script>

<style scoped>

</style>