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

2019独角兽企业重金招聘Python工程师标准>>>

先来看个效果图

码云地址: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是否加载完成的等待框以及浏览器窗口变化做出的响应

Avue一个神奇的框架http://avue.top

改造代码

./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)
      }

 

转载于:https://my.oschina.net/sunshineS/blog/1615716