vue项目中显示第三方外部链接的页面

   日期:2024-12-26     作者:czdytfhm4       评论:0    移动:http://w.yusign.com/mobile/news/4804.html
核心提示:1、打开窗口方法用于在浏览器中打开一个。如果不指定第二个参数,则链接通常会在当前窗口中打开,这相当于。 窗口的

1、打开窗口

 

方法用于在浏览器中打开一个。如果不指定第二个参数,则链接通常会在当前窗口中打开,这相当于。


  • 窗口的名称,如果指定相同的名称,那么新的URL会在同一个窗口中打开。


    • 在新窗口或新标签页中打开链接。

    • 在当前窗口中打开链接(默认行为)。

    • 在父框架中打开链接。

    • 在顶层框架中打开链接。

  • 窗口的特性,比如大小、位置等,以逗号分隔的字符串形式传入。


  • 布尔值,表示是否替换浏览器历史记录中的当前条目。

 

2、主要区域容器内展示

 

希望不打开新的页签,浏览器的url不刷新,在当前系统的展示区中显示,可以通过与结合,在变化时改变的,内容会根据路由更改显示不同的外部页面。

新建组件

 
 

动态增加侧边栏,点击侧边栏展示对应的外部链接

通过菜单管理走接口添加菜单信息,里面的字段需要包括(路由地址)、(外链地址),同时需要一个字段用来区分是初始化的路由,还是走接口添加的外链。为了保证一个外链对应唯一一个路由,路由地址可以设置为添加时的来保证唯一性。

 

可能会想所有的外链地址都用同一个路由去匹配,这样前端就可以写死不用区配置这个字段了,只需要跳转到同一个路由页面然后把url参数传过去显示就行。实现起来会发现,通过跳转页面只会的问题,如果链接了多个地址,则第一次跳转有效,后面都无效了,是因为页面没有刷新,如果在生命周期里面进行url的赋值操作,只会执行一次。可以再用去监听,在这里面也执行一次赋值操作,功能虽然实现了,但是会发现一个现象:如果有两个相同路由的导航菜单,第一次点击其中一个,它没有被加上类,第二次点击才被加上。

Element UI 的 NavMenu 导航菜单组件是根据路由匹配来决定哪个菜单项应该具有 is-active 类的

当路由改变时,Element UI 会自动检查当前路由与导航菜单的路由配置是否匹配,如果匹配,则会给相应的菜单项添加 类。
那么出现上面那种导航菜单中有多个匹配同一路由的菜单项,当第一次点击其中一个时,该菜单项没有被添加 ,这可能是 的导致的, 会选择匹配到的路由进行渲染,但由于第一次点击时,两个相同路由的导航菜单都匹配到了目标路由,但只有其中一个被选中。导航菜单组件可能需要进一步的逻辑来确保只有一个菜单项被激活。

不同的导航菜单对应不同的路由是很有必要的

所以需要动态添加路由,前面我们通过接口添加了侧边栏菜单的信息,这时在侧边栏组件中就可以通过接口获取到菜单数据,如果是外链就需要。

 

点击侧边栏,显示外部链接网页

在侧边栏组件中

 

在展示外链网页的组件中

在的时候以及的时候给模板中的赋值为当前路由的外链地址

vue项目中显示第三方外部链接的页面

 

有些链接进来的网页可能会报错如下

或者:拒绝连接请求

这个问题是由于浏览器的所引起的。当一个网页试图从一个不同源的服务器获取数据时,浏览器会执行预检请求(preflight request,并根据目标服务器的响应来决定是否允许跨域请求。

如果你想通过引入另一个项目,但是目标项目的服务器拒绝了你的连接请求,可以

需要在目标服务器上设置响应头,将你的域名添加到允许的跨域源列表中。例如你的域名是 ,可以将以下响应头添加到目标服务器配置中

Access-Control-Allow-Origin: https://yourdomain.com

如果想允许所有域进行跨域请求,可以设置为

Access-Control-Allow-Origin: *

     本文地址:http://w.yusign.com/news/4804.html    述古往 http://w.yusign.com/static/ , 查看更多
 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号