在有些時候,咱們須要在咱們的內容欄主區域顯示外部網頁。如查看服務端提供的SQL監控頁面,接口文檔頁面等。css
這個時候就要求咱們的導航菜單可以解析嵌套網頁的URL,並根據URL路由到相應的嵌套組件。接下來咱們就講解具體實現方案。html
1. 給菜單URL添加嵌套網頁前綴,若是是服務端網頁,除內部URL外,以iframe:前綴開頭,外部網頁直接以http[s]完整路徑開頭。前端
2. 路由導航守衛在動態加載路由時,檢測到若是是外部嵌套網頁,則綁定IFrame嵌套組件,最後用IFrame來渲染嵌套頁面。vue
3. 菜單點擊跳轉的時候,根據路由類型生成不一樣的路由路徑,載入特定的頁面內容渲染到步驟二綁定的特定組件上。git
前面的原理聽起來有點籠統,咱們來看看具體的實現過程。數據庫
如SQL監控頁面,其實顯示的是服務端Druid提供的現有頁面。後端
訪問地址是 : http://localhost:8088/druid/login.html 即服務端地址 + xxx格式。測試
效果以下圖所示,輸入服務端配置的帳號密碼就可查看了,這裏是用戶:admin, 密碼:admin。ui
登陸以後,能夠看到各類數據庫相關的監控記錄,是數據庫監控和調優的利器。this
咱們在SQL監控的菜單URL上去掉服務端地址,加上iframe:前綴。
屆時路由解析時在根據iframe:前綴綁定到IFrame嵌套頁面組件。
而後在點擊菜單跳轉時跳轉到服務端地址+xxx的具體訪問地址。
在導航守衛動態加載路由的時候,解析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>
在菜單路由跳轉的時候,判斷是不是iframe路由,若是是則處理成ifame須要的路由進行跳轉。
好了,嵌套網頁的大體實現過程就是這樣了,下面咱們來看看最終效果。
後端:https://gitee.com/liuge1988/kitty
前端:https://gitee.com/liuge1988/kitty-ui.git
做者:朝雨憶輕塵
出處:https://www.cnblogs.com/xifengxiaoma/ 版權全部,歡迎轉載,轉載請註明原文做者及出處。