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 result
let hasFound = false
const 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-button
type="primary"
plain
size="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`) // 路径替换为现在需要的路径
// 修改在路由文件里刚刚写的路由的iframe
constantRouterMap.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',
}
});
}
},