uni-app路由知識了解

路由大家都知道是什麼，我這裡解釋一下。首先路由有個英文名字叫Router，大家可以自己用翻譯工具自己翻譯聽聽，就知道怎麼讀了，我這裡貼一個官網的路由解釋地址，大家可以看看官網怎麼說的。

uni-app頁面路由為框架統一管理，開發者需要在pages.json裡配置每個路由頁面的路徑及頁面樣式。類似小程式在app.json中配置頁面路由一樣。所以 uni-app 的路由用法與 Vue Router 不同，如仍希望採用 Vue Router 方式管理路由，可在外掛市場搜尋 Vue-Router。

說白了路由就是頁面跳轉的意思，就是一個頁面展現給使用者看了，使用者從一個頁面跳轉到另外一個頁面就需要路由來顯示，今天我就來演示一下多端執行的路由配置方案。

uni-APP路由跳轉方式

uni-app 有兩種頁面路由跳轉方式：使用navigator元件跳轉、呼叫API跳轉。

navigator跳轉DEMO

這個是官網的一個簡單例子，可以看出來這個跳轉就是用到了navigator巢狀，只要是這個navigator 包裹在內的所有內容都可以點選跳轉，這個也是最基本的頁面跳轉方式。

<template> <view> <view class="page-body"> <view class="btn-area"> <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">  <button type="default">跳轉到新頁面</button> </navigator> <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">  <button type="default">在當前頁開啟</button> </navigator> <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">  <button type="default">跳轉tab頁面</button> </navigator> </view> </view> </view></template>

uni.navigateTo（OBJECT） 保留當前的頁面跳轉到應用內的某個頁面。

使用uni.navigateBack 可以返回到原頁面。

通過引數URL進行跳轉 如果是跳轉非tabBar頁面的路徑，路徑後面是可以攜帶引數的，引數與路徑之間使用？分隔引數建與引數值用=相連，不同引數用&分隔，，，，傳遞後的引數可以在目標頁面的onload函式可得到傳遞的引數.

uni.redirectTo（OBJECT） 關閉當前頁面，跳轉到應用內的某個頁面。（不可以使用uni.navigateBack返回，使用uni.redirectTo時當前頁面已經被關閉，無法返回，但是可以返回到當前頁面的上一個頁面 ）

uni.reLaunch(OBJECT) 關閉所有頁面，開啟到應用的某個頁面 （他與uni.navigateTo 的區別就是，uni.reLaunch關閉所有頁面進入新的頁面 ，uni.navigateTo是保留當前頁面並跳入最新頁面 ，）

uni.switchTab(OBJECT) 跳轉到tabBar頁面，並關閉其他所有非tabBar頁面 （設定url路徑時，需要跳轉的tabBar頁面的路徑必須是在pages.json的tabBar欄位定義的頁面，並且！！！路徑的後面不可以攜帶引數）

uni.navigateBack(OBJECT) 關閉當前頁面，返回上一級或者多級頁面。可通過getCurrentPages（）獲取當前的頁面棧，決定返回幾層

總結：

1.navigateTo,redirectTo 只能開啟非tabBar頁面

2.switchTab 只能開啟tabBar頁面

3.reLaunch 可以開啟任意頁面