前言

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

一、window.open

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

參數(shù)如下：

1.url（可選）：要在新窗口或新標(biāo)簽頁(yè)中加載的頁(yè)面的 URL。如果未提供此參數(shù)或?yàn)榭兆址?，則新窗口將打開一個(gè)空白頁(yè)面。

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

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

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

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

示例：

//指定新窗口的名稱、大小和其他選項(xiàng)window.open('https://www.example.com', '_blank', 'width=800, height=600');  
 
 // 在新標(biāo)簽頁(yè)中打開指定 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');

注意：

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

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

可以按照以下進(jìn)行：

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

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

二、vue-router

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

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

// 字符串路徑
router.push('/users/eduardo')
 
// 帶有路徑的對(duì)象
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)鍵字、分頁(yè)信息等。

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)建一個(gè) URLSearchParams 對(duì)象，并使用 append 方法向其中添加多個(gè)參數(shù)。

然后，使用 toString 方法將 URLSearchParams 對(duì)象轉(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);

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

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

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

// 假設(shè) URL 為 https://example.com/?name=John&age=25&city=New%20York
 
const urlParams = new URLSearchParams(window.location.search);
 
// 獲取單個(gè)參數(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 方法來獲取路由對(duì)象，然后通過 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ù)和方法...
    };
  }
};

總結(jié)

以上是幾種常在開發(fā)中使用的幾種跳轉(zhuǎn)和新開頁(yè)面的方式，關(guān)于router，在后續(xù)里需要更深入學(xué)習(xí)。

這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論