vue router 跳转时打开新页面的示例方法
更新时间：2019年07月28日 08:40:40 作者：米兰小铁匠
这篇文章主要介绍了vue router 跳转时打开新页面的示例方法，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
记录一下在vue项目中如何实现跳转到一个新页面（一个比较简单又比较基础的问题了），有两个方法：
1、<vue-link>标签实现新窗口打开
官方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用 <a> 标签，但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a")，如下：
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>
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 跳转时打开新页面的示例方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要为大家详细介绍了如何使用vue3实现一个高德地图天气小组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
本篇文章主要介绍了简单的vue-resourse获取json并应用到模板示例，非常具有实用价值，需要的朋友可以参考下。2017-02-02
在Vue.js中，路由与导航不仅涉及页面切换，还包括了向页面传递参数和获取查询参数，这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue 2.5 Level E 已发布，在原来2.x的基础上做了很多相应改进和对 bug 的修复，目前 2.5 系列最新的版本为 2.5.2，本文给大家介绍vue 2.5 新特征，需要的朋友参考下吧2017-10-10
这篇文章主要介绍了详解Vue自定义过滤器的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。2017-01-01
这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在本篇内容中小编给大家分享了关于Vue中使用canvas方法和步骤，对此有需要的读者们参考学习下。2019-02-02
这篇文章主要介绍了vue.js图片转Base64上传图片并预览的实现方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论