uni-app中Navigator組件的用法詳解及傳參方式

更新時間：2023年09月17日 15:07:25 作者：又在發(fā)呆嗎？

這篇文章主要給大家介紹了關(guān)于uni-app中Navigator組件的用法詳解及傳參方式的相關(guān)資料,在實際應用開發(fā)中我們經(jīng)常要使用到路由跳轉(zhuǎn),在uniapp官網(wǎng)中提供了navigator內(nèi)置組件,供我們使用,需要的朋友可以參考下

引言

在移動應用開發(fā)中，頁面跳轉(zhuǎn)是一項基礎(chǔ)而重要的功能。在uni-app中，我們可以使用Navigator組件來實現(xiàn)頁面間的跳轉(zhuǎn)。本文將詳細介紹uni-app中Navigator組件的用法，包括基本用法、傳參方式以及注意事項。

1.基本用法

1.1 navigator API 介紹

navigator用于頁面跳轉(zhuǎn)。
該組件類似HTML中的a標簽，但只能跳轉(zhuǎn)本地頁面。目標頁面必須在pages.json中冊。
該組件的功能有API方式，另見：https://uniapp.dcloud.io/api/router?id=navigateto

1.1 uni路由API說明

（圖片來源于官方文檔）

注意
跳轉(zhuǎn)tabbar頁面，必須設置open-type=“switchTab”
navigator-hover 默認為 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子節(jié)點背景色應為透明色。
navigator-open-type屬性如果使用對應的值，則對應值的功能會高于對應跳轉(zhuǎn)路徑。
app-nvue 平臺只有純nvue項目（render為native）才支持。非render為native的情況下，nvue暫不支持navigator組件，請使用API跳轉(zhuǎn)。
app下退出應用，Android平臺可以使用plus.runtime.quit。iOS沒有退出應用的概念。
uLink組件是navigator組件的增強版，樣式上自帶下劃線，功能上支持打開在線網(wǎng)頁、其他App的schema、mailto發(fā)郵件、tel打電話。
Vue3 項目因 SSR 需要，H5 端會在外層嵌套 a 標簽。

1.2 五種種常見的跳轉(zhuǎn)方式

1.2.1 uni.navigateTo(OBJECT)

保留當前頁面，跳轉(zhuǎn)到應用內(nèi)的某個頁面，使用uni.navigateBack可以返回到原頁面。

1.2.2 uni.redirectTo(OBJECT)

關(guān)閉當前頁面，跳轉(zhuǎn)到應用內(nèi)的某個頁面。

1.2.3 uni.reLaunch(OBJECT)

關(guān)閉所有頁面，打開到應用內(nèi)的某個頁面。

1.2.4 uni.switchTab(OBJECT)

跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。

1.2.5 uni.navigateBack(OBJECT)

關(guān)閉當前頁面，返回上一頁面或多級頁面。

1.3 Navigator組件的基本用法

在需要跳轉(zhuǎn)的頁面的.vue文件中，使用Navigator組件的標簽：

<navigator url="/pages/index/index"></navigator>

在上述代碼中，我們使用url屬性設置跳轉(zhuǎn)目標頁面的路徑，例如上述代碼中的跳轉(zhuǎn)目標頁面是/pages/index/index。

在源頁面的.js文件中，使用以下代碼來設置Navigator組件的跳轉(zhuǎn)事件：

onNavigatorTap() {
  uni.navigateTo({
    url: '/pages/index/index'
  })
}

在上述代碼中，我們使用uni.navigateTo()方法實現(xiàn)跳轉(zhuǎn)操作，其中url屬性用于設置跳轉(zhuǎn)目標頁面的路徑。

2.傳參方式

在實際開發(fā)中，我們通常需要將一些參數(shù)傳遞給目標頁面。Navigator組件提供了多種傳參方式：

2.1 Query參數(shù)傳遞

在源頁面中，使用以下代碼設置Navigator組件的url屬性

<navigator url="/pages/index/index?name=hhs&age=18"></navigator>

在目標頁面的.js文件中，可以使用以下代碼獲取Query參數(shù)：

onLoad(options) {
  console.log(options.name) // 輸出hhs
  console.log(options.age)  // 輸出18
}

2.2 組件間傳值

在源頁面中，可以使用以下代碼設置Navigator組件的事件：

onNavigatorTap() {
  uni.navigateTo({
    url: '/pages/index/index',
    success: function(res) {
      res.eventChannel.emit('customEvent', { name: 'Tom', age: 18 })
    }
  })
}

在目標頁面的.js文件中，可以使用以下代碼獲取傳遞的參數(shù)：

onLoad(options) {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('customEvent', (data) => {
    console.log(data.name) // 輸出hhs
    console.log(data.age)  // 輸出18
  })
}