需求：需要根據(jù)點擊不同的詳情创译，配置不同的tabs店溢，展示不同的iframe內(nèi)容酒唉。
解決：動態(tài)配置路由矩桂，根據(jù)跳轉(zhuǎn)不同的id，生成對應(yīng)的tabs標題痪伦。
{
path: '/other-view-iframe/:id',
name: 'other-view-iframe',
component: () => import(/* webpackChunkName: "flow-create" */ '@/views/common/frame/Frame'),
}
問題1：切換tabs(iframe)侄榴，iframe內(nèi)容沒有被加載，沒有更新网沾。
原因：切換tabs的邏輯是
this.$router.push({name,params})
而在不同iframe切換時name是同一個癞蚕。所以沒有進行實際意義上的跳轉(zhuǎn)，也沒有加載mounted鉤子辉哥。
解決：
在@/views/common/frame/Frame頁面桦山，監(jiān)聽$route
mounted() {
this.analysisRouter()
},
watch: {
$route: {
handler(to, from) {
this.analysisRouter()
},
deep: true
}
}
問題2：這時候發(fā)現(xiàn)iframeUrl已經(jīng)更改，但是頁面并沒有刷新证薇。
解決：通過v-if來控制iframe度苔，讓iframe消失且重新加載匆篓。
<iframe
v-if="reloadIframe"
:src="iframeUrl"
width="100%"
height="100%"
></iframe>
methods: {
analysisRouter() {
this.loading = true;
const { codeSearch, url } = this.$route.params;
// 先讓iframe銷毀
this.reloadIframe = false;
this.$nextTick(() => {
// 賦值地址浑度，再加載
this.iframeUrl = `${url}/${codeSearch}`
this.reloadIframe = true;
})
},
},
問題3：加載iframe時需要時間，展示空白不友好鸦概，所以我們需要給iframe加上loading效果箩张。
<div v-loading="loading" style="width:100%;height:100%">
<iframe
@load="loading = false"
v-if="reloadIframe"
:src="iframeUrl"
width="100%"
height="100%"
></iframe>
</div>
在iframe加載完時甩骏，讓loading消失。
@load="loading = false"
