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

这篇文章主要介绍了vue项目如何通过url链接引入其他系统页面问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

1.正常配置菜单

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

效果图:

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不同域名之间进行调动

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嵌套到当前页面。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持0133技术站。

以上就是vue项目如何通过url链接引入其他系统页面的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » Vue.js 教程