1. 路由(页面管理)

uni-app 页面路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式（类似小程序在app.json中配置页面路由）。所以 uni-app 的路由用法与 Vue Router 不同（如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router）。

1.1 路由跳转方式

说明：uni-app`有两种路由跳转方式：使用navigator组件跳转、调用API跳转。

1.2 页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。

1.3 获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
每个页面实例的方法属性列表如下：

uni-app 在 getCurrentPages()获得的页面里内置了一个方法 $getAppWebview() 可以获取当前页面的webview对象实例，从而获得 webview 的 style、id等属性，也可设置 webview 的 style。注意：此方法仅 5+app 支持。

2. 路由传值(页面传参)

说明：页面生命周期的onLoad(）监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）。如：

• 页面 1 传递参数

//页面跳转并传递参数
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

url为将要跳转的页面路径 ，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。如 'path?key1=value2&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。

• 页面 2 接收参数

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.name); //打印出上个页面传递的参数。
        console.log(option.message); //打印出上个页面传递的参数。
    }

注意：url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决。

示例一：传递简单参数

• home.vue中传递参数

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-btn-v">
                <button @tap="navigateTo">跳转新页面，并传递数据</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 中接收数据

<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); //打印出上个页面传递的参数。
            }
        }
    }
</script>
<style>
    
</style>

示例二：传递数据集合

• home.vue中传递数据集合

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-btn-v">
                <button @tap="JumpToNewPage">跳转新页面，并传递数据集合</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": "缝衣领"
                }
            ]
        }
    },
    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 中接收数据集合

<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>