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

本文轉載自查看原文 2018-09-22 16:44 8497 Vue.js/ vue/ 實戰演練/ element

嵌套外部網頁

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

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

實現原理

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

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

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

代碼實現

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

1. 確定菜單URL

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

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

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

登錄之后，可以看到各種數據庫相關的監控記錄，是數據庫監控和調優的利器。

我們在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>