Vue + Element UI 實現權限管理系統前端篇（十五）：嵌套外部網頁

時間 2019-12-05

標籤 vue element 實現權限管理系統前端十五嵌套外部網頁欄目 HTML 简体版

原文原文鏈接

嵌套外部網頁

在有些時候，咱們須要在咱們的內容欄主區域顯示外部網頁。如查看服務端提供的SQL監控頁面，接口文檔頁面等。css

這個時候就要求咱們的導航菜單可以解析嵌套網頁的URL，並根據URL路由到相應的嵌套組件。接下來咱們就講解具體實現方案。html

實現原理

1. 給菜單URL添加嵌套網頁前綴，若是是服務端網頁，除內部URL外，以iframe:前綴開頭，外部網頁直接以http[s]完整路徑開頭。前端

2. 路由導航守衛在動態加載路由時，檢測到若是是外部嵌套網頁，則綁定IFrame嵌套組件，最後用IFrame來渲染嵌套頁面。vue

3. 菜單點擊跳轉的時候，根據路由類型生成不一樣的路由路徑，載入特定的頁面內容渲染到步驟二綁定的特定組件上。git

代碼實現

前面的原理聽起來有點籠統，咱們來看看具體的實現過程。數據庫

1. 肯定菜單URL

如SQL監控頁面，其實顯示的是服務端Druid提供的現有頁面。後端

訪問地址是 : http://localhost:8088/druid/login.html 即服務端地址 + xxx格式。測試

效果以下圖所示，輸入服務端配置的帳號密碼就可查看了，這裏是用戶：admin, 密碼：admin。ui

登陸以後，能夠看到各類數據庫相關的監控記錄，是數據庫監控和調優的利器。this

咱們在SQL監控的菜單URL上去掉服務端地址，加上iframe:前綴。

屆時路由解析時在根據iframe:前綴綁定到IFrame嵌套頁面組件。

而後在點擊菜單跳轉時跳轉到服務端地址+xxx的具體訪問地址。

2. 綁定嵌套組件

在導航守衛動態加載路由的時候，解析URL，若是是嵌套頁面，則綁定到IFrame組件。

router/index.js

utils/iframe.js

/**
 * 嵌套頁面IFrame模塊
 */

/**
 * 嵌套頁面URL地址
 * @param {*} url
 */
export function getIFrameUrl (url) {
  let iframeUrl = ''
  if(/^iframe:.*/.test(url)) {
    iframeUrl = url.replace('iframe:', '')
  } else if(/^http[s]?:\/\/.*/.test(url)) {
    iframeUrl = url.replace('http://', '')
    iframeUrl = iframeUrl.replace('https://', '')
  }
  return iframeUrl
}

而且在每次路由時，把路由路徑保存到store，若是是IFrame嵌套頁面，則IFrame會在渲染時到store讀取iframeUrl以肯定渲染的內容。

store/modules/iframe.js

export default {
    state: {
        iframeUrl: []   // 嵌套頁面路由路徑
    },
    getters: {
    },
    mutations: {
        setIFrameUrl(state, iframeUrl){  // 設置iframeUrl
            state.iframeUrl = iframeUrl
        }
    },
    actions: {
    }
}

IFrame組件在渲染時，讀取sotre的iframeUrl以加載要渲染的內容(經過設置src)。

views/IFrame/IFrame.vue

<template>
  <div class="iframe-container">
    <iframe :src="src" scrolling="auto" frameborder="0" class="frame">
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: ''
    }
  },
  methods: {
    // 獲取路徑
    resetSrc: function (url) {
      this.src = this.global.baseUrl + url
    }
  },
  mounted(){
    this.resetSrc(this.$store.state.iframe.iframeUrl)
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        // 若是是跳轉到嵌套頁面，切換iframe的url
        this.resetSrc(val.path)
      }
    }
  }
}
</script>

<style lang="scss">
.iframe-container {
  position: absolute;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin-top: -29px;
  .frame {
    position: relative;
    top: 0px;
    width: 100%;
    height: 100%;
  }
}
</style>