1、路由登記

uni-app頁面路由為框架統(tǒng)一管理，開發(fā)者需要在pages.json里配置每個路由頁面的路徑及頁面樣式。
類似小程序在 app.json 中配置頁面路由一樣。
所以 uni-app 的路由用法與 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市場搜索 Vue-Router。

uni-app 通過 pages 節(jié)點配置應用由哪些頁面組成，pages 節(jié)點接收一個數(shù)組，數(shù)組每個項都是一個對象，其屬性值如下：

• path： String類型，用于配置頁面路徑
• style： Object類型，用于配置頁面窗口表現(xiàn)，配置項參考uniapp中pageStyle
• needLogin：Boolean類型 默認false，表示是否需要登錄才可訪問

pages.json文件中 頁面路由部分 代碼示意 如下 👇：

{"pages": [{"path": "pages/index/index","style": { ... }}, {"path": "pages/login/login","style": { ... }}]
}

新建頁面
點擊文件夾 =》右鍵選擇新建頁面

點擊新建頁面后出現(xiàn)如下彈框：

1. 新建頁面的名稱
2. 新建頁面的文件類型是vue文件還是nvue文件還是兩者都有
3. 是否創(chuàng)建同名目錄，默認開啟就是說默認他會給你先新建一個目錄然后里面再放新建的頁面文件
4. 新建頁面的文件位置 一般情況下不會動這里，除非你一開始點新建頁面的時候點錯父級文件夾了
5. 選擇模板，有很多個模板可以通過點擊5的選擇模板區(qū)域右側(cè)預覽模板，從而選擇自己需要的合適模板。如果這里面都沒有你想要的模板你還可以點擊8左側(cè)去插件市場選擇模板，當然可以點擊8右側(cè)自定義模板
6. 是否要在pages.json中注冊，默認是注冊的，但如果你新建的頁面是個組件的話這里可以取消
7. 創(chuàng)建，點擊按鈕就會按照你選擇的條件新建一個頁面。

2、路由跳轉(zhuǎn)

uni-app 有兩種頁面路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)。

tips:

• 頁面返回時會自動關(guān)閉 loading 及 toast, modal 及 actionSheet 不會自動關(guān)閉。
• 頁面關(guān)閉時，只是銷毀了頁面實例，未完成的網(wǎng)絡請求、計時器等副作用需開發(fā)者自行處理。

2.1 使用navigator組件跳轉(zhuǎn)

該組件類似HTML中的<a>組件，但只能跳轉(zhuǎn)本地頁面。
目標頁面必須在pages.json中注冊。

2.1.1 屬性

• url：String類型，表示應用內(nèi)的跳轉(zhuǎn)鏈接，值為相對路徑或絕對路徑，如："../first/first"，"/pages/first/first"， 注意不能加 .vue 后綴
• open-type：String類型默認navigate，表示跳轉(zhuǎn)方式

  open-type 有效值

  1. navigate 對應 uni.navigateTo 的功能
  2. redirect 對應 uni.redirectTo 的功能
  3. switchTab 對應 uni.switchTab 的功能
  4. reLaunch 對應 uni.reLaunch 的功能 抖音小程序與飛書小程序不支持
  5. navigateBack 對應 uni.navigateBack 的功能
  6. exit 退出小程序，target="miniProgram"時生效

• delta：Number類型，當 open-type 為 'navigateBack' 時有效，表示回退的層數(shù)
• animation-type：String類型，默認pop-in/out，當 open-type 為 navigate、navigateBack 時有效，窗口的顯示/關(guān)閉動畫效果，詳見：窗口動畫
• animation-duration：Number類型默認300，當 open-type 為 navigate、navigateBack 時有效，窗口顯示/關(guān)閉動畫的持續(xù)時間。
• hover-class：String類型默認navigator-hover，用于指定點擊時的樣式類，當hover-class="none"時，沒有點擊態(tài)效果
• hover-stop-propagation：Boolean類型默認false，指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)
• hover-start-time：Number類型默認50 ，表示按住后多久出現(xiàn)點擊態(tài)，單位毫秒
• hover-stay-time：Number類型默認600，表示手指松開后點擊態(tài)保留時間，單位毫秒
• target：String類型，默認是self，表示 在哪個小程序目標上發(fā)生跳轉(zhuǎn)，默認當前小程序，值域self/miniProgram

2.1.2 代碼示例

代碼示例效果展示

<template><view><view class="page-body"><view class="btn-area"><navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"><button type="default">跳轉(zhuǎn)到新頁面</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">跳轉(zhuǎn)tab頁面</button></navigator></view></view></view>
</template>
<script>
// navigate.vue頁面接受參數(shù)
export default {onLoad: function (option) { //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)console.log(option.id); //打印出上個頁面?zhèn)鬟f的參數(shù)。console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。}
}
</script>

url有長度限制，太長的字符串會傳遞失敗，可使用窗體通信、全局變量，或encodeURIComponent等多種方式解決，如下為encodeURIComponent示例。

<navigator :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// navigate.vue頁面接受參數(shù)

onLoad: function (option) {const item = JSON.parse(decodeURIComponent(option.item));
}

2.1.3 注意事項

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

2.2調(diào)用API跳轉(zhuǎn)

2.2.1 uni.navigateTo(OBJECT)

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

OBJECT參數(shù)

• url ：String類型，必填，是 需要跳轉(zhuǎn)的應用內(nèi)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2’，path為下一個頁面的路徑，下一個頁面的onLoad函數(shù)可得到傳遞的參數(shù)
• animationType：String類型，不必填，默認pop-in，是窗口顯示的動畫效果，詳見：窗口動畫
• animationDuration：Number類型，不必填，默認300，是窗口動畫持續(xù)時間，單位為 ms
• events：Object類型，不必填，是 頁面間通信接口，用于監(jiān)聽被打開頁面發(fā)送到當前頁面的數(shù)據(jù)。
• success：Function類型，不必填，是接口調(diào)用成功的回調(diào)函數(shù)
• fail：Function類型，不必填，是接口調(diào)用失敗的回調(diào)函數(shù)
• complete：Function類型，不必填，是接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

object.success 回調(diào)函數(shù)

Object res

• eventChannel EventChannel 和被打開頁面進行通信

示例

//在起始頁面跳轉(zhuǎn)到test.vue頁面并傳遞參數(shù)
uni.navigateTo({url: 'test?id=1&name=uniapp'
});

// 在test.vue頁面接受參數(shù)
export default {onLoad: function (option) { //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)console.log(option.id); //打印出上個頁面?zhèn)鬟f的參數(shù)。console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。}
}

// 在起始頁面跳轉(zhuǎn)到test.vue頁面，并監(jiān)聽test.vue發(fā)送過來的事件數(shù)據(jù)
uni.navigateTo({url: '/pages/test?id=1',events: {// 為指定事件添加一個監(jiān)聽器，獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)acceptDataFromOpenedPage: function(data) {console.log(data)},someEvent: function(data) {console.log(data)}...},success: function(res) {// 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })}
})// 在test.vue頁面，向起始頁通過事件傳遞數(shù)據(jù)
onLoad: function(option) {const eventChannel = this.getOpenerEventChannel();eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});// 監(jiān)聽acceptDataFromOpenerPage事件，獲取上一頁面通過eventChannel傳送到當前頁面的數(shù)據(jù)eventChannel.on('acceptDataFromOpenerPage', function(data) {console.log(data)})
}

url有長度限制，太長的字符串會傳遞失敗，可改用窗體通信、全局變量，另外參數(shù)中出現(xiàn)空格等特殊字符時需要對參數(shù)進行編碼，如下為使用encodeURIComponent對參數(shù)進行編碼的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue頁面接受參數(shù)
onLoad: function (option) {const item = JSON.parse(decodeURIComponent(option.item));
}

注意：

1. 頁面跳轉(zhuǎn)路徑有層級限制，不能無限制跳轉(zhuǎn)新頁面
2. 跳轉(zhuǎn)到 tabBar 頁面只能使用 switchTab 跳轉(zhuǎn)
3. 路由API的目標頁面必須是在pages.json里注冊的vue頁面。如果想打開web url，在App平臺可以使用 plus.runtime.openURL或web-view組件；H5平臺使用 window.open；小程序平臺使用web-view組件（url需在小程序的聯(lián)網(wǎng)白名單中）。在hello uni-app中有個組件ulink.vue已對多端進行封裝，可參考。

2.2.2 uni.redirectTo(OBJECT)

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

OBJECT參數(shù)說明

• url：String類型，必填，是需要跳轉(zhuǎn)的應用內(nèi)非 tabBar 的頁面的路徑，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 'path?key=value&key2=value2'
• success：Function類型，不必填，是接口調(diào)用成功的回調(diào)函數(shù)
• fail：Function類型，不必填，是接口調(diào)用失敗的回調(diào)函數(shù)
• complete：Function類型，不必填，是 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

代碼示例

uni.redirectTo({url: 'test?id=1'
});

注意：

• 跳轉(zhuǎn)到 tabBar 頁面只能使用 switchTab 跳轉(zhuǎn)

2.2.3 uni.reLaunch(OBJECT)

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

注意：

如果調(diào)用了 uni.preloadPage(OBJECT) 不會關(guān)閉，僅觸發(fā)生命周期 onHide

OBJECT參數(shù)說明

• url：String類型，必填，是需要跳轉(zhuǎn)的應用內(nèi)頁面路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 'path?key=value&key2=value2'，如果跳轉(zhuǎn)的頁面路徑是 tabBar 頁面則不能帶參數(shù)
• success：Function類型，不必填，是接口調(diào)用成功的回調(diào)函數(shù)
• fail：Function類型，不必填，是接口調(diào)用失敗的回調(diào)函數(shù)
• complete：Function類型，不必填，是 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例

uni.reLaunch({url: 'test?id=1'
});

export default {onLoad: function (option) {console.log(option.id);}
}

Tips：

• H5端調(diào)用uni.reLaunch之后之前頁面棧會銷毀，但是無法清空瀏覽器之前的歷史記錄，此時navigateBack不能返回，如果存在歷史記錄的話點擊瀏覽器的返回按鈕或者調(diào)用history.back()仍然可以導航到瀏覽器的其他歷史記錄。

2.2.4 uni.switchTab(OBJECT)

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

注意：

如果調(diào)用了 uni.preloadPage(OBJECT) 不會關(guān)閉，僅觸發(fā)生命周期 onHide

OBJECT參數(shù)說明

• url：String類型，必填，是 需要跳轉(zhuǎn)的 tabBar 頁面的路徑（需在 pages.json 的 tabBar 字段定義的頁面），路徑后不能帶參數(shù)
• success：Function類型，不必填，是接口調(diào)用成功的回調(diào)函數(shù)
• fail：Function類型，不必填，是接口調(diào)用失敗的回調(diào)函數(shù)
• complete：Function類型，不必填，是 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

代碼示例
pages.json

{"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁"},{"pagePath": "pages/other/other","text": "其他"}]}
}

other.vue

uni.switchTab({url: '/pages/index/index'
});

2.2.5 uni.navigateBack(OBJECT)

關(guān)閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

OBJECT參數(shù)說明

• delta：Number類型，不必填，默認1 ，是返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。
• animationType：String類型，不必填，默認pop-out，是窗口關(guān)閉的動畫效果，詳見：窗口動畫
• animationDuration：Number類型，不必填，默認300，是窗口關(guān)閉動畫的持續(xù)時間，單位為 ms
• success：Function類型，不必填，是接口調(diào)用成功的回調(diào)函數(shù)
• fail：Function類型，不必填，是接口調(diào)用失敗的回調(diào)函數(shù)
• complete：Function類型，不必填，是 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

代碼示例

// 此處是A頁面
uni.navigateTo({url: 'B?id=1'
});// 此處是B頁面
uni.navigateTo({url: 'C?id=1'
});// 在C頁面內(nèi) navigateBack，將返回A頁面
uni.navigateBack({delta: 2
});

tips：

• 調(diào)用 navigateTo 跳轉(zhuǎn)時，調(diào)用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。

2.2.1-2.2.5注意事項

• navigateTo, redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
• 不能在首頁 onReady 之前進行頁面跳轉(zhuǎn)。
• H5端頁面刷新之后頁面棧會消失，此時navigateBack不能返回，如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。

2.2.6 EventChannel頁面間事件通信通道

方法

1. EventChannel.emit(string eventName, any args)
觸發(fā)一個事件

• string eventName 事件名稱
• any args 事件參數(shù)

2. EventChannel.off(string eventName, function fn)
取消監(jiān)聽一個事件。給出第二個參數(shù)時，只取消給出的監(jiān)聽函數(shù)，否則取消所有監(jiān)聽函數(shù)

• string eventName 事件名稱
• function fn 事件監(jiān)聽函數(shù)
• 參數(shù) any args 觸發(fā)事件參數(shù)

3. EventChannel.on(string eventName, function fn)
持續(xù)監(jiān)聽一個事件

• string eventName 事件名稱
• function fn 事件監(jiān)聽函數(shù)
• 參數(shù) any args 觸發(fā)事件參數(shù)

4. EventChannel.once(string eventName, function fn)
監(jiān)聽一個事件一次，觸發(fā)后失效

• string eventName 事件名稱
• function fn 事件監(jiān)聽函數(shù)
• 參數(shù) any args 觸發(fā)事件參數(shù)

3. 頁面棧

序號	字形	描述
1	【?！?/td>	表示棧的那個管道
2	→棧】	表示入棧
3	?！俊?/td>	表示出棧