目标：

解决需要在vue3二级路由-内嵌外部链接url

思路：

1. 通过接口查询到 菜单数据
2. 处理菜单数据，将菜单数据解析成路由
3. watch监听路由(route)，用 .slice(0, 4)判断是否有 ‘http‘,有则是外链路由，外链则使用iframe显示，否则用 router-view显示组件

---

实现：

页面

提示：具体数据就不过多解释，可以按上述思路自行实现，以下为部分代码(代码不完整，可以自行理解)

            <div v-if="!state.isIframe" class="router-view-row" :key="route.name">
                <router-view v-slot="{ Component}">
                    <transition name="el-zoom-in-center">
                        <keep-alive v-if="route.meta?.keepAlive">
                            <Suspense>
                                <component :is="Component" />
                                <!-- 加载中状态 -->
                                <template #fallback>
                                    正在加载...
                                </template>
                            </Suspense>
                        </keep-alive>
                        <Suspense v-else>
                                <component :is="Component" />
                                <!-- 加载中状态 -->
                                <template #fallback>
                                    正在加载...
                                </template>
                            </Suspense>
                    </transition>
                </router-view>
            </div>
            <transition name="el-zoom-in-center">
                <div class="iframe-row" v-show="state.isIframe">
                    <template v-for="(it, ix) in cacheExtLinks" :key="ix">
                        <Suspense>
                            <iframe v-show="state.isIframe&&(it.modelId==state.modelId)" :key="ix" ref="ExternalLink"
                                id="ExternalLink" name="ExternalLink" width="100%" height="100%" frameborder="0"
                                allowfullscreen="true" scrolling="yes"
                                :src="comAction.handerUrl(it.urlAddress, it.modelId)"></iframe>
                            <!-- 加载中状态 -->
                            <template #fallback>
                                正在加载...
                            </template>
                        </Suspense>
                    </template>
                </div>
            </transition>

ts

<script setup lang='ts'>
const state: RouteRepeatData = reactive<RouteRepeatData>({
    isIframe: false,
    pageInclude: [],
    url: '',
    modelId: undefined,
    routerPath: "/login"

});


const cacheExtLinks = computed<Array<ExternalInput>>(() => store.getters.cacheExtLinks);



watch(route, (newVal: any) => {
    // console.log('route',route)
    if(route.path.slice)
    state.isIframe = route.meta.urlAddress ? (route.meta.urlAddress as string).slice(0, 4) == "http" : false;
    if (state.isIframe) {

        state.url = route.meta.urlAddress as string | undefined;
        state.modelId = route.meta.modelId as string | undefined;

        let isShow = cacheExtLinks.value.some(x => x.modelId == state.modelId)
        if (!isShow) store.dispatch('externalLink/addCachExtLink', {
            urlAddress: state.url,
            modelId: state.modelId,
        })
    }
    state.routerPath = route.path;

}, {
    immediate: true,
    deep: true
})
</script>

菜单信息处理

clickSrcollMenu(data: MenusDto, index) {
        let rtname = data.enCode.replace(/\./g, '-');
        let route = {
            name: rtname,
            path: '/mainPage/' + rtname,
            component: defineAsyncComponent(() => import("@/views/externalLink/index.vue")),
            meta: {
                urlAddress: data.urlAddress,
                title: data.fullName,
                icon: data.icon,
                zhTitle: data.fullName,
                modelId: data.id,
            }
        }
        store.dispatch('externalLink/addOuterChainRouters', route);

        state.actionIden = index;
        store.dispatch('sidebar/setActionMenu', {
            pname: lastMenuList.value.enCode,
            ldata: data
        })
    },

store里面 mutations:

ADD_OUTER_CHAIN_ROUTHERS:(state: ExternalState, data: RouteRecordRaw)=>{
    let isExis = state.outerChainRouters.some(x=>x.name==data.name)
    // console.log('isExis',isExis)
    if(!isExis){
      state.outerChainRouters.push(data);
      setOuterChainRouters(state.outerChainRouters);
      //追加路由
      if(!router.hasRoute(data.name)){
        router.addRoute('mainPage',data)
      }
    }
  },

---

提示：主要是理解思路，代码难得整理完整。。。