vue路由跳轉打開新窗口和關閉窗口怎么實現

本篇內容主要講解“vue路由跳轉打開新窗口和關閉窗口怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue路由跳轉打開新窗口和關閉窗口怎么實現”吧!

vue路由跳轉打開新窗口和關閉窗口

需求：從當前頁面跳轉到其他頁面時，打開一個新窗口

比如：點擊頁面上的用戶反饋，打開用戶反饋的新頁面，要使用編程式導航

編程式導航

使用路由對象的resolve的方法解析路由，可以得到location、router、href等目標路由的信息，只要得到href就可以使用window.open打開新窗口了。

代碼如下：

    // 路由跳轉新界面
    userFeedback() {
      // this.$router.push({ path: '/feedback' });
      用push,也能實現跳轉，但是不能打開新頁面。
      const { href } = this.$router.resolve({
        path: '/feedback'
      });
      window.open(href, '_blank');
    },

如果是復雜的需要帶參數跳轉的路由，是以下寫法，用query攜帶參數

  <template slot-scope="scope">
    <el-button
      size="small"
      @click.stop="watchDetail(scope.row)">詳情</el-button>
  </template>

 watchDetail(row) {
    const { href } = this.$router.resolve({
      path: `/answerSituation`,
      query: {
        id: row.id,
        paperName: this.paperName,
        name: row.name,
        examScore: row.examScore,
        answersTime: row.answersTime
      }
    });
    window.open(href, '_blank');
  }

window.open( )方法

定義和用法

open() 方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口。

語法

window.open(URL,name,specs,replace)

第一個參數URL 

可選。打開指定的頁面的URL。如果沒有指定URL，打開一個新的空白窗口

第二個參數name

可選。指定target屬性或窗口的名稱。支持以下值：

• _blank - 在新窗口顯示目標網頁。這是默認

• _self - 在當前窗口顯示目標網頁

• _top - 框架網頁中在上部窗口中顯示目標網頁(不常用)

第三個參數

可選參數，設置窗口參數，各參數用逗號隔開。

關閉窗口 window.close()

用法

window.close();   //關閉本窗口
或者
<窗口對象>.close();   //關閉指定的窗口

例子：關閉新窗口

 var mywin=window.open('http://www.xxx.com'); //將新打的窗口對象，存儲在變量mywin中
 mywin.close();

vue路由跳轉打開新窗口(被瀏覽器攔截)

今天做了一個功能是點擊按鈕路由跳轉打開新的窗口頁面

第一種方法

<router-link target="_blank" :to="{path:'/FundManger/FundProductMoney',
query:{managerId:fundcode}}></router-link>"

第二種方法

  <a @click="getGetMyPortfolioById(scope.row) ">查看</a>

 getGetMyPortfolioById(vals) { 
    getMyPortfolioById({

    }).then(response = >{ 
        const routerdata = this.$router.resolve({ 
                  name: '組合分析以及組合持倉', 
                  params: { managerId: vals.fundCode } 
        }) 
        const newhref = routerdata.href + '?managerId=' + vals.fundCode 
         window.open(newhref, '_blank') 
    })
 }

當我們用到第二種方法時候，是觸發事件請求接口根據條件去判斷在進行路由跳轉，這個時候就會遇到瀏覽器被攔截的問題

在接口請求的回調函數中 需要使用window.open（）打開新頁面，但是等接口請求成功之后，window.open（）打開新頁面總是被瀏覽器攔截，原因大概是，放在請求回調函數中的操作，被瀏覽器認為不是用戶主動觸發的事件，并且延遲1000ms ，被認為有可能是廣告，于是被攔截

解決的方法：

在接口請求之前先打開一個空的頁面

let tempPage=window.open('' ", _blank');

然后在回調函數中，

tempPage.location=url;

第二種方法（改良版） 

  <a @click="getGetMyPortfolioById(scope.row) ">查看</a>

  getGetMyPortfolioById(vals) {
      const tempPage = window.open('', '_blank')
      getMyPortfolioById({}).then(response = >{
             const routerdata = this.$router.resolve({
             name: '組合分析以及組合持倉',
                  params: {
                       managerId: vals.fundCode
                 }
               })
             const newhref = routerdata.href + '?managerId=' + vals.fundCode
             tempPage.location = newhref
      })
 }

到此，相信大家對“vue路由跳轉打開新窗口和關閉窗口怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！