。

以前项目中写过调用外部链接的功能#xff0c;是有菜单的#xff0c;但是这次是按钮#xff0c;所以不能直接把地址配到菜单里。

业务场景点击某个按钮需要跳转到外部iframe的地址但是需要在本项目内显示。

以前项目中写过调用外部链接的功能是有菜单的但是这次是按钮所以不能直接把地址配到菜单里。

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

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

{path:

import(/views/Iframe/index.vue),name:

4705778289,meta:

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

export

permissionStore.getAllAuthMenu;if(!name){

return

i){if(list[i]?.meta?.iframe?.includes?.(name)

!hasFound

getRouteItemByIframeUuidName(secondnet?)查找包含字符串找到后台添加的iframe地址

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

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

import

popper-classatooltipel-buttontypeprimaryplainsizesmallclickgoSecondnetclassgoFirstnet

font14

iconjinruerciguanwang/i/el-button/el-tooltip//

调取预览type:4;ObjectID

getRouteItemByIframeUuidName(secondnet?);

url

cur.meta.iframe.replace(secondnet,

secondnetpreview)

修改在路由文件里刚刚写的路由的iframeconstantRouterMap.forEach(item

{if

props.selectEle?.item.STATIONID,type:

4,}});}},