1. 路由(页面管理)

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

1.1 路由跳转方式

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

1.2 页面栈

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

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>
页面重定向	当前页面出栈，新页面入栈	uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/>

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。

不能在 App.vue 里面进行页面跳转。

1.3 获取当前页面栈

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

方法	描述	平台说明
page.$getAppWebview()	获取当前页面的webview对象实例	5+App
page.route	获取当前页面的路由	-

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>

uni-app框架之路由和路由传参