温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue项目怎么通过url链接引入其他系统页面

发布时间:2023-03-10 11:46:54 来源:亿速云 阅读:379 作者:iii 栏目:开发技术

本篇内容主要讲解“vue项目怎么通过url链接引入其他系统页面”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目怎么通过url链接引入其他系统页面”吧!

    vue通过url链接引入其他系统页面

    1.正常配置菜单

    在vue页面使用iframe进行嵌套加载其它系统的页面,已加载百度为例

    <template>
      <div id="app">
          <iframe
             
             :width="searchTableWidth"
             :height="searchTableHeight"
             v-bind:src="reportUrl"
           ></iframe>
      </div>
    </template>
    <script>
    import Vue from 'vue'
    export default {
      methods: {
        widthHeight() {
          this.searchTableHeight = window.innerHeight -180;
          this.searchTableWidth = window.innerWidth - 230
        },
      },
      data() {
        return {
          reportUrl: 'https://www.baidu.com/',
          searchTableHeight: 0,
          searchTableWidth: 0
        }
      },
       mounted() {
        window.onresize = () => {
          this.widthHeight(); // 自适应高宽度
        };
        this.$nextTick(function () {
          this.widthHeight();
        });
      },
      created() {
        // 从路由里动态获取 url地址   具体地址看libs下util.js里的 backendMenuToRoute  方法 
        this.reportUrl = 'https://www.baidu.com/'
      },
      watch: {
        '$route': function () {
          // 监听路由变化
          this.reportUrl =  'https://www.baidu.com/'
        }
      }
    }
    </script>

    效果图:

    vue项目怎么通过url链接引入其他系统页面

    2.加载引入系统可能会出现拦截

    xxx 拒绝了我们的连接请求。

    前端页面Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'sameorigin',对于这个问题我们需要在引入的项目中进行拦截处理,引入项目中response.addHeader("x-frame-options","SAMEORIGIN")需要改写为response.addHeader("x-frame-options","ALLOW-FROM http://127.0.0.1:项目端口/");对访问方式进行允许iframe不同域名之间进行调动

    vue项目怎么通过url链接引入其他系统页面

    3.引入项目的后台拦截代码

    @Configuration
    public class MvcConfig implements WebMvcConfigurer {
       //配置日志
        private static final Logger logger= LoggerFactory.getLogger(MvcConfig.class);
        
        @Autowired
        SystemConfig systemConfig;
       
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
            registry.addInterceptor(new HandlerInterceptor() {
                @Override
                public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
                    //设置日志级别
                    //logger.debug("前置方法被执行");
                    return true;
                }
     
                @Override
                public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
                    //logger.info("后置方法被执行");
                    //System.out.println(systemConfig.getMqiUrl());
                    if(null == modelAndView){
                        return;
                    }
                    response.addHeader("x-frame-options","ALLOW-FROM http://127.0.0.1:8004/");
    
                    modelAndView.getModelMap().addAttribute("arcgisserviceUrl", systemConfig.getArcgisserviceUrl());
                }
     
                @Override
                public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
                    //logger.debug("最终方法被执行");
                }
            });
        }
    }

    vue页面嵌套外部url

    我的需求是一进入页面通过调接口获取页面的url,然后把url嵌套到当前页面。

    <template>
      <div class="page-content" id="bi-div"></div>
    </template>
    
    <script>
      import reportFormApi from '@/api/reportForm'
      
      export default {
        name: 'reportComponent',
        props:{
          codeStr:String
        },
        data () {
          return {
            urlCode :"",
          }
        },
        mounted: function () {
          if(this.codeStr){
            this.urlCode = this.codeStr;
            this.getUrl();
          }
        },
        methods: {
          getUrl(){
            reportFormApi.getQuickBi({url : "/postUrl/" + this.urlCode}).then(res=>{
              if(res.code==0){
                var frame = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="100%" src="' + res.data.previewUrl + '"></iframe>';
                var newNode = document.createElement('div');
                newNode.innerHTML = frame;
                newNode.style.height = '1200px';
                var htmlBody = document.getElementById('bi-div');
                htmlBody.insertBefore(newNode, htmlBody.firstChild);
              }else{
                this.$Message.error({
                  content: res.message,
                  duration: 2.5,
                  closable:true,
                });
              }
            })
          }
        }
      }
    </script>

    到此,相信大家对“vue项目怎么通过url链接引入其他系统页面”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI