vue 中iframe 框架_基于vue-element-admin框架改造——支持第三方iframe网站

最新推荐文章于 2023-07-06 17:15:15 发布

迷茫的材料搬砖狗

最新推荐文章于 2023-07-06 17:15:15 发布

阅读量688

点赞数

文章标签： vue 中iframe 框架

本文链接：https://blog.csdn.net/weixin_35501172/article/details/114473999

版权

本文介绍了如何基于vue-element-admin框架改造，实现支持加载第三方iframe网站的功能。通过示例代码展示如何在`./src/views/iframe/index.vue`中创建iframe组件，以及在`./src/router/routes.js`和`./src/store/modules/tagsView.js`中进行相应的配置，确保完整URL路径的正确处理。改造后，系统能显示加载完成前的等待框，并适应浏览器窗口的变化。

摘要由CSDN通过智能技术生成

先来看个效果图

码云地址:https://gitee.com/smallweigit/vue-element-admin.git

例：http://localhost:9527/#/iframe/urlPath?src=https://www.baidu.com (访问百度)

格式：http://localhost:9527/#/iframe/urlPath?src=第三方的网站

并且支持判断iframe是否加载完成的等待框以及浏览器窗口变化做出的响应

改造代码

./src/views/iframe/index.vue(第三方iframe组件)

./src/router/reouter/index.js(增加路由) { path: '/iframe', component: Layout, redirect: '/iframe', // you can set roles in root nav children: [{ path: ':routerPath', component: _import('iframe/index'), name: 'iframe', meta: { title: 'iframe', icon: 'people' } }] },

./src/store/modules/tagsView.js(让vue-router路由可以获取完整的url路径)

将全部的view.path改成view.fullPath if (state.visitedViews.some(v => v.path === view.fullPath)) return state.visitedViews.push({ name: view.name, path: view.fullPath, title: view.meta.title || 'no-name' }) if (!view.meta.noCache) { state.cachedViews.push(view.name) }