Vue3中调用外部iframe链接方法

业务场景，点击某个按钮需要跳转到外部iframe的地址，但是需要在本项目内显示。以前项目中写过调用外部链接的功能，是有菜单的，但是这次是按钮，所以不能直接把地址配到菜单里。

实现方法：在本地路由文件里写个路由，meta里的iframe地址设为空字符串，然后在点击按钮的页面通过一个方法，获取以前配置过跳外部iframe的菜单地址（红框里的），并替换路径，然后再把新地址设置到写的路由文件里，再携带参数跳转。

1、 src/router/index.ts,增加路由，@/views/Iframe/index.vue这个组件是写好的解析路径的组件

 {path: '/',component: LayoutComponent,name: 'XXX预览',children: [{path: '/4705778289',component: () => import('@/views/Iframe/index.vue'),name: '4705778289',meta: {hidden: true,title: 'XXX预览',iframe: "",id: "4705778289",outorin: '1',},}],meta: {hidden: true,}}

2、在routerHelper.ts文件里写一个查找某条路由的方法，以前iframe使用uuid查找，但是这里查找的时候需要加个？，所以改了一下uuid的方法，改成了直接传入一个参数

// 根据name，从多层数组获取路由对象。 
export const getRouteItemByIframeUuidName = (name, ignoreType = true)=>{const list = permissionStore.getAllAuthMenu;if(!name){ return false; }let resultlet hasFound = falseconst fn = function(list, name){for(let i=0; i < list.length; i++){if(list[i]?.meta?.iframe?.includes?.(name) && !hasFound && (ignoreType ? true : list[i].moduletype === '1')){result = list[i]hasFound = true}else if(list[i].children && list[i].children.length > 0){fn(list[i].children, name)}}}fn(list, name)return result
}

3、在文件里引入方法，使用递归方法 getRouteItemByIframeUuidName('secondnet?')查找包含字符串，找到后台添加的iframe地址，

4、找到后使用replace替换secondnet，替换为secondnetpreview，

5、然后引入router文件，通过循环找到这条路由，更新meta.iframe,然后再携带query跳转

 

 import { getRouteItemByIframeUuidName } from '@/utils/routerHelper'import { constantRouterMap } from '@/router' // 写的路由文件里的路由<el-tooltip effect="dark" content="XXX按钮" placement="right" popper-class="atooltip"><el-buttontype="primary"plainsize="small"@click="goSecondnet"class="goFirstnet font14 iconfont"><i class="iconfont iconjinruerciguanwang"></i></el-button></el-tooltip>// 调取预览：type:4;ObjectID ：编号goSecondnet() {const cur = getRouteItemByIframeUuidName('secondnet?'); // 通过方法获取以前配置过的地址const url = cur.meta.iframe.replace('secondnet', `secondnetpreview`) // 路径替换为现在需要的路径// 修改在路由文件里刚刚写的路由的iframeconstantRouterMap.forEach(item => {if (item.name == 'XXX预览') {if (item.children[0].name == '4705778289') {item.children[0].meta.iframe = url;}}});// 携带参数跳转if (props.selectEle?.type == "communityRange" && props.selectEle?.item) {router.push({ path: '/4705778289', query: {id: props.selectEle?.item.STATIONID,type: '4',}});}},