快捷導航

Vue Router實現(xiàn)新窗口打開的三種方法

更新時間：2026年03月06日 09:45:10 作者：愛寫程序的小高

在Vue開發(fā)中,經(jīng)常需要實現(xiàn)新窗口打開路由頁面的需求,本文將系統(tǒng)介紹Vue Router中實現(xiàn)新窗口打開的三種主要方法,包括router-link組件方式、編程式導航方式和原生window.open方式,需要的朋友可以參考下

一、router-link組件方式

最簡單的方式是使用router-link組件的target="_blank"屬性：

<template>
  <router-link 
    to="/new-page" 
    target="_blank"
    rel="noopener noreferrer"
  >
    打開新窗口
  </router-link>
</template>

特點：

簡單直接
適合靜態(tài)鏈接
需要添加rel="noopener noreferrer"防止安全漏洞

二、編程式導航方式

通過$router.resolve配合window.open實現(xiàn)：

<template>
  <button @click="openNewWindow">編程式導航打開</button>
</template>

<script>
export default {
  methods: {
    openNewWindow() {
      const route = this.$router.resolve({
        path: '/new-page',
        query: { id: 123 }
      });
      window.open(route.href, '_blank', 'noopener,noreferrer');
    }
  }
}
</script>

特點：

最推薦的方式
保持路由配置一致性
支持動態(tài)參數(shù)傳遞

三、原生window.open方式

直接拼接完整URL實現(xiàn)：

<template>
  <button @click="nativeOpenNewWindow">原生方式打開</button>
</template>

<script>
export default {
  methods: {
    nativeOpenNewWindow() {
      window.open(
        `${window.location.origin}/new-page?id=123`,
        '_blank',
        'noopener,noreferrer'
      );
    }
  }
}
</script>

特點：

簡單直接
適用于簡單場景
需要手動處理URL拼接

路由配置示例

import Vue from 'vue'
import Router from 'vue-router'
import NewPage from '../views/NewPage.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/new-page',
      name: 'NewPage',
      component: NewPage
    }
  ]
})

參數(shù)傳遞對比

方法	參數(shù)傳遞方式	適用場景
router-link	通過`:to`綁定對象	靜態(tài)鏈接
編程式導航	通過query對象	動態(tài)參數(shù)
原生window.open	URL拼接	簡單場景

到此這篇關(guān)于Vue Router實現(xiàn)新窗口打開的三種方法的文章就介紹到這了,更多相關(guān)Vue Router新窗口打開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vuex中使用modules時遇到的坑及問題
這篇文章主要介紹了vuex中使用modules時遇到的坑及問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項目后沒有webpack.config.js(vue.config.js)文件的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue props 單向數(shù)據(jù)流的實現(xiàn)
這篇文章主要介紹了Vue props 單向數(shù)據(jù)流的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue實現(xiàn)組件跟隨鼠標位置彈出效果(示例代碼)
這篇文章主要介紹了vue中實現(xiàn)組件跟隨鼠標位置彈出效果,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-02-02
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue2項目使用sass的示例代碼
本篇文章主要介紹了vue項目使用sass的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
詳解Vue2中組件間通信的解決全方案
Vue中組件這個特性讓不少前端er非常喜歡，我自己也是其中之一，它讓前端的組件式開發(fā)更加合理和簡單。下面這篇文章主要給大家介紹了關(guān)于Vue2中組件間通信的解決全方案，文中通過示例代碼介紹的非常詳細，需要的朋友們下面來一起看看吧。
2017-07-07
Vue插槽簡介和使用示例詳解
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot>?表示，父組件可以在這個占位符中填充任何模板代碼，如?HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下
2023-03-03
vue-draggable實現(xiàn)pc端拖拽效果
這篇文章主要為大家詳細介紹了vue-draggable實現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
使用vue中的混入mixin優(yōu)化表單驗證插件問題
這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗證插件,本文是小編給大家總結(jié)的一些表單插件的問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-07-07