前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue路由如何在新窗口打开页面

vue路由如何在新窗口打开页面

作者头像
李维亮
发布2021-07-08 10:13:54
8.1K0
发布2021-07-08 10:13:54
举报
文章被收录于专栏:李维亮的博客

一. <router-link>标签实现新窗口打开:

官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a"),示例如下:

代码语言:javascript
复制
<router-link target="_blank" :to="{path:'/user/document',query:{id:'1'}}">新页面打开home页</router-link>

注:只有tag="a"模式下 target="_blank" 属性才会生效。

二. 编程式导航:

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 router.push 和 router.go ,但是vue2.0以后,这种方式就不支持新窗口打开的属性了。这两种平常用的都比较多,这里就不再赘述。百度了下,找到了使用

代码语言:javascript
复制
 let routeUrl = this.$router.resolve({
      path: "/share",
      query: {id:96}
 });
 window.open(routeUrl .href, '_blank');

三、直接使用a标签:

代码语言:javascript
复制
<a href="http://localhost:8088/" target="_blank">{{ msg }}</a>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一. <router-link>标签实现新窗口打开:
  • 二. 编程式导航:
  • 三、直接使用a标签:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档