网站建设培训方案,母婴用品网站建设规划,wordpress 社交图标,冶金工业建设工程定额总站网站业务场景#xff0c;点击某个按钮需要跳转到外部iframe的地址#xff0c;但是需要在本项目内显示。以前项目中写过调用外部链接的功能#xff0c;是有菜单的#xff0c;但是这次是按钮#xff0c;所以不能直接把地址配到菜单里。 实现方法#xff1a;在本地路由文件里写个… 业务场景点击某个按钮需要跳转到外部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 i0; 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/routerHelperimport { constantRouterMap } from /router // 写的路由文件里的路由el-tooltip effectdark contentXXX按钮 placementright popper-classatooltipel-buttontypeprimaryplainsizesmallclickgoSecondnetclassgoFirstnet font14 iconfonti classiconfont 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,}});}},
