快捷導(dǎo)航

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

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

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

一、router-link組件方式

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

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

特點(diǎn)：

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

二、編程式導(dǎo)航方式

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

<template>
  <button @click="openNewWindow">編程式導(dǎo)航打開</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>

特點(diǎn)：

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

三、原生window.open方式

直接拼接完整URL實(shí)現(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>

特點(diǎn)：

簡(jiǎn)單直接
適用于簡(jiǎn)單場(chǎng)景
需要手動(dòng)處理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ù)傳遞對(duì)比

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

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

您可能感興趣的文章:

相關(guān)文章

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