Vue Router 中实现在新窗口打开页面

最新推荐文章于 2025-03-11 11:22:29 发布

原创最新推荐文章于 2025-03-11 11:22:29 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue 2.x 专栏收录该内容

74 篇文章

订阅专栏

本文详细介绍了在Vue应用中如何使用<router-link>标签实现在新窗口打开链接，揭示了官方文档描述与实际操作的差异。同时，深入探讨了编程式导航的实现方式，包括如何利用$this.$router.resolve方法结合window.open实现新窗口跳转。

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

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

<router-link target="_blank" :to="{path:'/about',query:{id:deviceId}}">关于</router-link>

<script>
export default {
  data(){
    return{
      deviceId:'123456'
    }
  }
}
</script>

在这里插入图片描述

2. 编程式导航

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

<button @click="gotest1">按钮</button>

gotest1(){
   let deviceId = '56789'
   let routeData = this.$router.resolve({
      query: {id:deviceId},
      path:'/test1'
   });
   window.open(routeData.href, '_blank');
}