1. 路由(頁面管理)
uni-app 頁面路由全部交給框架統(tǒng)一管理，開發(fā)者需要在pages.json里配置每個路由頁面的路徑及頁面樣式（類似小程序在app.json中配置頁面路由）。所以 uni-app 的路由用法與 Vue Router 不同（如仍希望采用 Vue Router 方式管理路由，可在插件市場搜索 Vue-Router）。
1.1 路由跳轉(zhuǎn)方式
說明：uni-app`有兩種路由跳轉(zhuǎn)方式：使用navigator組件跳轉(zhuǎn)、調(diào)用API跳轉(zhuǎn)。
1.2 頁面棧
框架以棧的形式管理當(dāng)前所有頁面， 當(dāng)發(fā)生路由切換的時候，頁面棧的表現(xiàn)如下：
| 路由方式 | 頁面棧表現(xiàn) | 觸發(fā)時機 |
|---|---|---|
| 初始化 | 新頁面入棧 | uni-app 打開的第一個頁面 |
| 打開新頁面 | 新頁面入棧 | 調(diào)用 API uni.navigateTo 、使用組件 <navigator open-type="navigate"/> |
| 頁面重定向 | 當(dāng)前頁面出棧，新頁面入棧 | uni.redirectTo 、使用組件 <navigator open-type="redirectTo"/> |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁 | 調(diào)用 API uni.navigateBack 、使用組件 <navigator open-type="navigateBack"/> 、用戶按左上角返回按鈕、安卓用戶點擊物理back按鍵 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 | 調(diào)用 API uni.switchTab 、使用組件 <navigator open-type="switchTab"/> 、用戶切換 Tab |
| 重加載 | 頁面全部出棧，只留下新的頁面 | 調(diào)用 API uni.reLaunch 、使用組件 <navigator open-type="reLaunch"/> |
navigateTo,redirectTo只能打開非 tabBar 頁面。switchTab只能打開tabBar頁面。reLaunch可以打開任意頁面。- 頁面底部的
tabBar由頁面決定，即只要是定義為tabBar的頁面，底部都有tabBar。- 不能在
App.vue里面進行頁面跳轉(zhuǎn)。
1.3 獲取當(dāng)前頁面棧
getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實例，以數(shù)組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當(dāng)前頁面。
注意： getCurrentPages() 僅用于展示頁面棧的情況，請勿修改頁面棧，以免造成頁面狀態(tài)錯誤。
每個頁面實例的方法屬性列表如下：
| 方法 | 描述 | 平臺說明 |
|---|---|---|
| page.$getAppWebview() | 獲取當(dāng)前頁面的webview對象實例 | 5+App |
| page.route | 獲取當(dāng)前頁面的路由 | - |
uni-app 在 getCurrentPages()獲得的頁面里內(nèi)置了一個方法 $getAppWebview() 可以獲取當(dāng)前頁面的webview對象實例，從而獲得 webview 的 style、id等屬性，也可設(shè)置 webview 的 style。注意：此方法僅 5+app 支持。
2. 路由傳值(頁面?zhèn)鲄?
說明：頁面生命周期的onLoad(）監(jiān)聽頁面加載，其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為Object（用于頁面?zhèn)鲄ⅲ?。如?/p>
- 頁面 1 傳遞參數(shù)
//頁面跳轉(zhuǎn)并傳遞參數(shù)
uni.navigateTo({
url: 'page2?name=liy&message=Hello'
});
url為將要跳轉(zhuǎn)的頁面路徑 ，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用
?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔。如 'path?key1=value2&key2=value2'，path為下一個頁面的路徑，下一個頁面的onLoad函數(shù)可得到傳遞的參數(shù)。
- 頁面 2 接收參數(shù)
onLoad: function (option) { //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)
console.log(option.name); //打印出上個頁面?zhèn)鬟f的參數(shù)。
console.log(option.message); //打印出上個頁面?zhèn)鬟f的參數(shù)。
}
注意：url有長度限制，太長的字符串會傳遞失敗，可使用窗體通信、全局變量，或encodeURIComponent等多種方式解決。
示例一：傳遞簡單參數(shù)
- home.vue中傳遞參數(shù)
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="navigateTo">跳轉(zhuǎn)新頁面，并傳遞數(shù)據(jù)</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '主頁',
}
},
methods: {
navigateTo() {
uni.navigateTo({
url: 'new-page1?data=Hello'
})
}
}
}
</script>
<style>
</style>
- new-page1.vue 中接收數(shù)據(jù)
<template>
<view>
<view>
{{data}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:""
}
},
onLoad(e){
if(e.data){
this.data = e.data;
console.log(e.data); //打印出上個頁面?zhèn)鬟f的參數(shù)。
}
}
}
</script>
<style>
</style>
示例二：傳遞數(shù)據(jù)集合
- home.vue中傳遞數(shù)據(jù)集合
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="JumpToNewPage">跳轉(zhuǎn)新頁面，并傳遞數(shù)據(jù)集合</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '主頁',
processList:[
{
"process_id": "5",
"process_name": "卷下盤"
},
{
"process_id": "3",
"process_name": "接后片"
},
{
"process_id": "6",
"process_name": "接前片"
},
{
"process_id": "7",
"process_name": "水洗標"
},
{
"process_id": "8",
"process_name": "釘扣"
},
{
"process_id": "1",
"process_name": "貼口袋"
},
{
"process_id": "2",
"process_name": "做袖叉"
},
{
"process_id": "3",
"process_name": "做袖英"
},
{
"process_id": "4",
"process_name": "縫衣領(lǐng)"
}
]
}
},
methods: {
JumpToNewPage:function(){
console.log("JumpToNewPage-processList1:" + JSON.stringify(this.processList));
var processList = JSON.stringify(this.processList);
uni.navigateTo({
url: 'new-page2?processList=' + processList
})
}
}
}
</script>
<style>
</style>
- new-page2.vue 中接收數(shù)據(jù)集合
<template>
<view>
<view v-for="(item,index) in processList" :key="index">
{{item.process_name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
processList:[]
}
},
onLoad(options){
if(options.processList){
console.log("onLoad-processList2:" + options.processList);
// this.processList = options.processList;
// console.log("onLoad-processList3:" + this.processList);
this.processList = JSON.parse(options.processList);
console.log("onLoad-processList3:" + JSON.stringify(this.processList));
}
}
}
</script>
<style>
</style>
