un-iapp路由学习，跨平台运行，支持Android和IOS系统

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（）获取当前的页面栈，决定返回几层