快捷導(dǎo)航

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

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

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

引言

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

1.基本用法

1.1 navigator API 介紹

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

1.1 uni路由API說明

（圖片來源于官方文檔）

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

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

1.2.1 uni.navigateTo(OBJECT)

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

1.2.2 uni.redirectTo(OBJECT)

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

1.2.3 uni.reLaunch(OBJECT)

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

1.2.4 uni.switchTab(OBJECT)

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

1.2.5 uni.navigateBack(OBJECT)

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

1.3 Navigator組件的基本用法

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

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

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

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

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

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

2.傳參方式

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

2.1 Query參數(shù)傳遞

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

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

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

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

2.2 組件間傳值

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

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

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

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