uni-app 路由跳轉和傳參

1. 前言

在沒接觸過 web 開發之前，大家對路由這兩個字應該也比較熟悉，就是我們平時使用無線網絡時接觸到的路由器。

其實 web 開發中的路由與我們平時接觸到的路由器原理是一樣的，都是將不同的請求地址轉發給相應的控制器進行處理。

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

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

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

2. 路由的優缺點

2.1 優點

• 網頁更加流暢

傳統web開發的每一次請求都需要服務器來進行處理，但是有些操作只需要修改頁面邏輯就可以實現用戶需要的效果，不用請求服務器，這時路由就派上用場了。

使用路由開發，用戶的請求不需要每次都經過服務器來處理，提高了網頁的流暢性，可以快速將網頁內容展現給客戶。

• 方便用戶分享收藏網頁

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

2.2 缺點

• 沒有合理利用緩存

使用瀏覽器時，點擊瀏覽器的前進，后退按鈕，使用路由開發的項目，會重新發送請求，緩存利用不合理。

• 無法記住當前頁面的滾動位置

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

3. 配置路由

3.1 自動配置路由

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

點擊創建，現在 pages.json 文件中會自動添加下面的路由代碼。

實例：

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

3.2 手動配置路由

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

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

4. 路由跳轉

uni-app 有兩種方式進行路由跳轉：使用 navigator 組件跳轉、調用 API 跳轉，下面我們來分別了解這兩種方式如何跳轉。

4.1 navigator 組件跳轉

我們來實現從 index 頁面跳轉到剛剛創建的 page1 頁面，編輯 pages/index/index.vue 文件。

在 data 中添加變量 url。

實例：

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

然后在 template 標簽中添加下面代碼。

實例：

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

點擊工具欄–運行–運行到內置瀏覽器，查看效果。點擊按鈕就能通過open-type指定的跳轉方式跳轉到 page1 頁面。

4.2 API 跳轉

繼續編輯 pages/index/index.vue 文件，我們創建幾個 methods 方法，在方法里面實現頁面跳轉。

實例：

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

在 template 標簽中添加下面代碼，添加點擊事件。

實例：

<button type="default" @tap="navigateTo">跳轉到新頁面</button>
<button type="default" @tap="redirectTo">在當前頁打開</button>
<button type="default" @tap="switchTab">跳轉到tab頁面</button>

這樣我們就可以點擊工具欄–運行–運行到內置瀏覽器查看效果了，與上面的效果是一樣的

5. 路由傳值

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

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

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

實例：

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

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

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

實例：

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

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

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

6. 小結

本節課程我們主要學習了路由以及路由傳參，本節課程的需要掌握的重點如下：

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

• 掌握路由的兩種跳轉方式：navigator 組件跳轉、調用 API 跳轉；

• 掌握路由的傳參。