快捷導(dǎo)航

使用window.open和vue router新開頁面

更新時間：2024年03月12日 11:05:08 作者：鶴渺

這篇文章主要介紹了使用window.open和vue router新開頁面方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

打開新頁面，并實現(xiàn)在新開頁面中攜帶參數(shù)，可以使用 URLSearchParams 對象，進行參數(shù)的拼接和解析，vue router跳轉(zhuǎn)新頁面和window.open都可以，幾種方式適應(yīng)于不同場景，URLSearchParams對象是結(jié)合window.open使用的。

一、window.open

使用 window.open() 可以在新窗口或新標簽頁中打開指定的 URL。

參數(shù)如下：

1.url（可選）：要在新窗口或新標簽頁中加載的頁面的 URL。如果未提供此參數(shù)或為空字符串，則新窗口將打開一個空白頁面。

2.target（可選）：指定在哪里打開鏈接的目標窗口或標簽頁。常用的取值包括：

_blank：在新標簽頁或新窗口中打開鏈接。
_self：在當(dāng)前窗口中打開鏈接（默認行為）。
_parent：在父級窗口中打開鏈接。
_top：在頂級窗口中打開鏈接。
自定義窗口名稱：如果已經(jīng)存在具有相同名稱的窗口，則在該窗口中加載鏈接，否則會打開一個新的窗口。

3.windowFeatures（可選）：一個包含窗口特性的字符串（目前未在項目中使用過），用于指定新窗口的行為和外觀。常用的特性包括：

width：新窗口的寬度。
height：新窗口的高度。
left：新窗口的左側(cè)位置。
top：新窗口的頂部位置。
scrollbars：是否顯示滾動條。
resizable：新窗口是否可調(diào)整大小。
fullscreen：是否以全屏模式打開新窗口。
等等。

示例：

//指定新窗口的名稱、大小和其他選項window.open('https://www.example.com', '_blank', 'width=800, height=600');  
 
 // 在新標簽頁中打開指定 URL
window.open('https://www.example.com');
 
// 在具有特定名稱的窗口中打開鏈接（如果不存在，則打開新窗口）
window.open('https://www.example.com', 'myWindow');
 
// 在指定大小的新窗口中打開鏈接
window.open('https://www.example.com', '_blank', 'width=800, height=600');

注意：

由于瀏覽器的安全限制，對于彈出窗口的行為，大多數(shù)瀏覽器會進行阻止或攔截。

為了避免被瀏覽器攔截，打開新窗口的操作必須是由用戶的明確操作觸發(fā)，例如點擊按鈕，有些如在點擊某個鏈接后，獲取一些參數(shù)，再跳轉(zhuǎn)到某個地址的行為

可以按照以下進行：

setTimeout(() => window.open(url, "_blank"))

瀏覽器為了避免彈出廣告影響用戶，禁用了通過代碼調(diào)用超鏈接在新標簽打開頁面的功能，所以必須是用戶的明確行為，點擊，長按等操作之類的，但把打開鏈接的操作放到setTimeout里運行，因為setTimeout是在主線程運行的，所以該操作不會被瀏覽器認定為代碼操作的，所以不會攔截。

二、vue-router

官網(wǎng)：Vue Router | Vue.js 的官方路由

這個比較常見，一般跳轉(zhuǎn)頁面攜帶參數(shù)常用兩種，query，params

// 字符串路徑
router.push('/users/eduardo')
 
// 帶有路徑的對象
router.push({ path: '/users/eduardo' })
 
// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
 
// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
 
// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })

兩者的區(qū)別：

1.Query Parameters（查詢參數(shù)）：Query參數(shù)是通過URL中的查詢字符串來傳遞的，格式為/path?key1=value1&key2=value2。在Vue Router中，可以使用$route.query來獲取和操作查詢參數(shù)。

示例：

// 跳轉(zhuǎn)到帶查詢參數(shù)的URL
this.$router.push({ path: '/path', query: { key1: 'value1', key2: 'value2' } });
 
// 獲取查詢參數(shù)
console.log(this.$route.query.key1); // 輸出：'value1'

query參數(shù)適合用于傳遞可選的、不敏感的參數(shù)，如搜索關(guān)鍵字、分頁信息等。

2.URL Parameters（路徑參數(shù)）：Path參數(shù)是通過URL中的路徑段來傳遞的，格式為/path/:param1/:param2。在Vue Router中，可以使用$route.params來獲取和操作路徑參數(shù)。

示例：

// 跳轉(zhuǎn)到帶路徑參數(shù)的URL
this.$router.push({ path: '/path/value1/value2' });
 
// 獲取路徑參數(shù)
console.log(this.$route.params.param1); // 輸出：'value1'

params參數(shù)適合用于傳遞必要的、敏感的參數(shù)，如資源ID、用戶信息等。

心得：

query參數(shù)通過查詢字符串傳遞，適合傳遞可選的、不敏感的參數(shù)。
params參數(shù)通過路徑段傳遞，適合傳遞必要的、敏感的參數(shù)。

三、URLSearchParams

創(chuàng)建一個 URLSearchParams 對象，并使用 append 方法向其中添加多個參數(shù)。

然后，使用 toString 方法將 URLSearchParams 對象轉(zhuǎn)換為查詢字符串，并將其附加到 URL 上。

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
params.append('param3', 'value3');
 
const url = `https://www.example.com/newpage?${params.toString()}`;
window.open(url);

四、新頁面接收參數(shù)

接收參數(shù)，兩種方式都可以，如下：

要獲取 URL 參數(shù)的值，可以使用 URLSearchParams 對象的 get() 方法

// 假設(shè) URL 為 https://example.com/?name=John&age=25&city=New%20York
 
const urlParams = new URLSearchParams(window.location.search);
 
// 獲取單個參數(shù)的值
const name = urlParams.get('name');
const age = urlParams.get('age');
const city = urlParams.get('city');
 
console.log(name); // 輸出：John
console.log(age); // 輸出：25
console.log(city); // 輸出：New York

在 Vue 3 中，可以使用 useRouter 方法來獲取路由對象，然后通過 query 或者params來獲取 URL 參數(shù)。

import { useRouter } from 'vue-router';
 
export default {
  setup() {
    const router = useRouter();
 
    // 獲取 URL 參數(shù)
    const name = router.query.name;
    const age = router.query.age;
    const city = router.query.city;
 
    console.log(name); // 輸出：John
    console.log(age); // 輸出：25
    console.log(city); // 輸出：New York
 
    // 其他邏輯...
 
    return {
      // 返回組件的響應(yīng)式數(shù)據(jù)和方法...
    };
  }
};