uni-app系列：页面跳转以及传递参数

梦里梦外; 2021-07-24 12:32 1199阅读 0赞

**目录**

uniapp实现页面跳转以及跳转后传值过去

一、链接跳转

二、事件跳转

1、uni.navigateTo(OBJECT)

2、uni.redirectTo(OBJECT)

3、uni.reLaunch(OBJECT)

4、uni.switchTab(OBJECT)

5、uni.navigateBack(OBJECT)

三、传值与接收

四、类型转换

4.1 传递json

--------------------

# uniapp实现页面跳转以及跳转后传值过去 #

**开篇注意**：

页面跳转的时候，传递的只能是string类型的，现实中如果想要传递json、Array记得需要先转成string传递，传递接收后再转回来使用（详见四、类型转换）。

# 一、链接跳转 #

链接跳转是通过navigator标签来实现的

<navigator :url=" './nav?index='+navData">点击传递参数</navigator>

# 二、事件跳转 #

用某个事件的函数，来实现跳转需求

## 1、**uni.navigateTo(OBJECT)** ##

**功能：**

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

**参数**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

**代码**

uni.navigateTo({
        url: 'test?id=1&name=uniapp'   /*这是跳转到的页面路径，？id=1这些都是传递的数据，可以直接在test页面接受
    });

## **2、uni.redirectTo(OBJECT)** ##

**功能：**

关闭当前页面，跳转到应用内的某个页面

参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

代码

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

## **3、uni.reLaunch(OBJECT)** ##

**功能：**

关闭所有页面，打开到应用内的某个页面

参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

代码

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

## **4、uni.switchTab(OBJECT)** ##

**功能：**

跳转到tabbar页面，并关闭其他所有的非tabbar页面。

参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2][]

代码

pages.json中：

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

vue事件代码函数中：

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

## **5、uni.navigateBack(OBJECT)** ##

**功能：**

关闭当前页面，返回上一个或者上几个页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

参数

![2020082716470395.png][]

代码

// 此处是A页面
    uni.navigateTo({
        url: 'B?id=1'
    });
    
    // 此处是B页面
    uni.navigateTo({
        url: 'C?id=1'
    });
    
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({
        delta: 2
    });

# 三、传值与接收 #

通过跳转传值一般套路就是在URL中把需要传的值带过去，然后再接收的页面onLoad函数中，利用参数接回来。

跳转页面：

uni.navigateTo({
       url:'页面路径?id=1'
    })

接收页面：

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
            console.log(option.id); 
    //打印出上个页面传递的参数。传递的是id=1，则获取到的就是option.id
        }

# 四、类型转换 #

如开题所说，因为URL传递的只能是字符串，传递JSON、ARRAY不是字符串时候需要先转成字符串，然后接收后再换回来。

## 4.1 传递json ##

传递时候：

在传递的地方，

var mynavData = JSON.stringify(that.navData); // 这里转换成 字符串
                    uni.navigateTo({
                        url:'./nav?index='+mynavData
                    })

新页面接收后：

onLoad(options) {
                var data = JSON.parse(options.index); // 字符串转对象
                console.log(data)
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/711247c6641f41c39a6fb767cfce6d4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/95c016b924324e848d221f341d65c118.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2]: /images/20210724/5d3dfaa9915344f5b1b7e663f5c96cd4.png
[2020082716470395.png]: /images/20210724/308148787b56475c82758e7844980cb7.png