vue-router如何实现跳转时打开新页面

小编给大家分享一下vue-router如何实现跳转时打开新页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联公司是一家专业提供西塞山企业网站建设,专注与成都网站建设、网站建设H5开发、小程序制作等业务。10年已为西塞山众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

1、标签实现新窗口打开

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

新页面打开home页

2、编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下:

seeShare(){
   let routeUrl = this.$router.resolve({
     path: "/share",
     query: {id:96}
   });
   window.open(routeUrl.href, '_blank');
}

以上是“vue-router如何实现跳转时打开新页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页题目:vue-router如何实现跳转时打开新页面
网址分享:
http://bzwzjz.com/article/pcjcjd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都响应式网站建设 网站制作公司 成都网站设计公司 高端网站建设 成都网站制作 达州网站设计 企业网站设计 营销型网站建设 LED网站设计方案 成都网站制作 成都网站设计 成都企业网站建设 企业网站设计 重庆外贸网站建设 成都网站设计 网站制作公司 网站建设费用 手机网站建设 网站建设推广 成都网站设计 成都网站设计 响应式网站设计方案