uni-app 路由跳轉(zhuǎn)和傳參

1. 前言

在沒接觸過 web 開發(fā)之前，大家對路由這兩個字應(yīng)該也比較熟悉，就是我們平時使用無線網(wǎng)絡(luò)時接觸到的路由器。

其實(shí) web 開發(fā)中的路由與我們平時接觸到的路由器原理是一樣的，都是將不同的請求地址轉(zhuǎn)發(fā)給相應(yīng)的控制器進(jìn)行處理。

在 web 開發(fā)中的路由會根據(jù)不同的 url 將請求分配到能處理這個 URL 的程序或模塊，根據(jù)不同的 url 地址展示不同的頁面或內(nèi)容。

uni-app 有自己的一套路由管理方式，與 Vue Router 不同。頁面路由需要在 pages.json 文件中配置，與小程序在 app.json 中配置頁面路由是類似的。

那路由在項目中的具體作用是怎樣的呢？我們這節(jié)課來了解一下。

2. 路由的優(yōu)缺點(diǎn)

2.1 優(yōu)點(diǎn)

• 網(wǎng)頁更加流暢

傳統(tǒng)web開發(fā)的每一次請求都需要服務(wù)器來進(jìn)行處理，但是有些操作只需要修改頁面邏輯就可以實(shí)現(xiàn)用戶需要的效果，不用請求服務(wù)器，這時路由就派上用場了。

使用路由開發(fā)，用戶的請求不需要每次都經(jīng)過服務(wù)器來處理，提高了網(wǎng)頁的流暢性，可以快速將網(wǎng)頁內(nèi)容展現(xiàn)給客戶。

• 方便用戶分享收藏網(wǎng)頁

使用路由進(jìn)行開發(fā)，頁面內(nèi)容會根據(jù) url 的改變而改變，而不會像js處理的那樣，只修改了頁面內(nèi)容，而不會改變 url。所以當(dāng)用戶收藏與分享頁面時，通過 url 就會直接打開指定的頁面，用戶體驗較好。

2.2 缺點(diǎn)

• 沒有合理利用緩存

使用瀏覽器時，點(diǎn)擊瀏覽器的前進(jìn)，后退按鈕，使用路由開發(fā)的項目，會重新發(fā)送請求，緩存利用不合理。

• 無法記住當(dāng)前頁面的滾動位置

在使用瀏覽器的前進(jìn)，后退按鈕時，單頁面無法記住之前滾動的位置。

3. 配置路由

3.1 自動配置路由

我們來創(chuàng)建一個 page1 頁面。右鍵點(diǎn)擊 pages 文件夾，選擇新建頁面。在下面新彈出的窗口，系統(tǒng)會默認(rèn)幫我們勾選“在 pages.json 中注冊的選項”，這樣頁面創(chuàng)建完成后，路由也會自動配置好。

點(diǎn)擊創(chuàng)建，現(xiàn)在 pages.json 文件中會自動添加下面的路由代碼。

實(shí)例：

{
  "path" : "pages/page1/page1",
  "style" : {}
}

3.2 手動配置路由

如果需要自己手動添加路由，直接在 pages.json 文件的 pages 對象中添加即可。我們一般配置 path 和 style 兩個屬性。

自己配置的時候要注意大括號要配對，不要落下逗號。

4. 路由跳轉(zhuǎn)

uni-app 有兩種方式進(jìn)行路由跳轉(zhuǎn)：使用 navigator 組件跳轉(zhuǎn)、調(diào)用 API 跳轉(zhuǎn)，下面我們來分別了解這兩種方式如何跳轉(zhuǎn)。

4.1 navigator 組件跳轉(zhuǎn)

我們來實(shí)現(xiàn)從 index 頁面跳轉(zhuǎn)到剛剛創(chuàng)建的 page1 頁面，編輯 pages/index/index.vue 文件。

在 data 中添加變量 url。

實(shí)例：

data() {
  return {
    url:"/pages/page1/page1"
  }
}

然后在 template 標(biāo)簽中添加下面代碼。

實(shí)例：

<!-- open-type的表示跳轉(zhuǎn)方式 -->
<!-- open-type為navigate，如果不寫open-type跳轉(zhuǎn)方式默認(rèn)為navigate -->
<navigator :url="url" open-type="navigate">
  <button type="default">跳轉(zhuǎn)到新頁面</button>
</navigator>
<!-- open-type為redirect -->
<navigator :url="url" open-type="redirect">
  <button type="default">在當(dāng)前頁打開</button>
</navigator>
<!-- open-type為switchTab -->
<navigator :url="url" open-type="switchTab">
  <button type="default">跳轉(zhuǎn)到tab頁面</button>
</navigator>

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，查看效果。點(diǎn)擊按鈕就能通過open-type指定的跳轉(zhuǎn)方式跳轉(zhuǎn)到 page1 頁面。

4.2 API 跳轉(zhuǎn)

繼續(xù)編輯 pages/index/index.vue 文件，我們創(chuàng)建幾個 methods 方法，在方法里面實(shí)現(xiàn)頁面跳轉(zhuǎn)。

實(shí)例：

navigateTo(){
  uni.navigateTo({
    url: this.url
  })
},
redirectTo(){
  uni.redirectTo({
  url: this.url
  });
},
switchTab(){
  uni.switchTab({
    url: this.url
  });
}

在 template 標(biāo)簽中添加下面代碼，添加點(diǎn)擊事件。

實(shí)例：

<button type="default" @tap="navigateTo">跳轉(zhuǎn)到新頁面</button>
<button type="default" @tap="redirectTo">在當(dāng)前頁打開</button>
<button type="default" @tap="switchTab">跳轉(zhuǎn)到tab頁面</button>

這樣我們就可以點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器查看效果了，與上面的效果是一樣的

5. 路由傳值

從 A 頁面跳轉(zhuǎn)到 B 頁面，我們想要將 A 頁面的值傳到 B 頁面，可以將要傳遞的值直接在跳轉(zhuǎn)頁面的 URL 路徑后面拼接，然后再在 B 頁面 onload 里面接收這個值。

現(xiàn)在我們想要從 index 頁面跳轉(zhuǎn)到 page1 頁面，在 index 頁面中，將想要傳遞的值拼接到 url 的后面，下面我們寫代碼演示一下。

編輯 pages/index/index.vue 文件。

實(shí)例：

// 添加跳轉(zhuǎn)按鈕
<button type="default" @tap="navigateData">跳轉(zhuǎn)到 page1 頁面</button>

//添加 navigateData 方法，將參數(shù)拼接到 URL 后面
navigateData(){
  uni.navigateTo({
    url: this.url + "?data='我是從 index 頁面?zhèn)鬟^來的值'"
  })
}

接下來在 page1 頁面接收參數(shù)，編輯 pages/page1/page1.vue 文件。

實(shí)例：

onLoad(options) {
  var data = options.data
  console.log(data)
}

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，查看效果。點(diǎn)擊「跳轉(zhuǎn)到 page1 頁面」的按鈕，跳轉(zhuǎn)到 page1 頁面后，在控制臺會打印出傳遞過來的data值。

Tips：url有長度限制，太長的字符串會傳遞失敗，可以使用緩存、窗體通信等解決。

6. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了路由以及路由傳參，本節(jié)課程的需要掌握的重點(diǎn)如下：

• 了解路由是什么，掌握路由的配置；

• 掌握路由的兩種跳轉(zhuǎn)方式：navigator 組件跳轉(zhuǎn)、調(diào)用 API 跳轉(zhuǎn)；

• 掌握路由的傳參。