uni-app页面跳转以及传值

在uni-app中是没有路由这一说法的，想要跳转页面官方给出了以下几种方法：

一、通过配置pages.json里面的tabBar来实现，主要写法请参考官方文档：

uni-app官方配置pages.json方法

二、通过官方给的组件navigator来实现跳转（类似a标签），主要样式如下

<navigator url="跳转地址" open-type="跳转方式"></navigator>

注意：在添加url地址时不要加 .vue 后缀

open-type的值主要有以下几种：

• navigate                      保留当前页面，跳转到应用内的某个页面
• redirect                       关闭当前页面，跳转到应用内的某个页面。
• switchTab                   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
• reLaunch                    关闭所有页面，打开到应用内的某个页面。
• navigateBack             关闭当前页面，返回上一页面或多级页面。
• exit                              退出小程序，当navigator标签的target="miniProgram"时生效

三、通过官方提供的API跳转，传值也主要是这里介绍 

1、uni.navigateTo(obj)      保留当前页面，跳转到应用内的某个页面

// 起始页面  操作
uni.navigate({
    url:"./test?id=2&name",    // 跳到test页面  附加了两个参数：id和name
    events:{
      // 为指定事件添加一个监听器  获取被打开页面传送到当前页面的数据
      someEvent:function(data){
         console.log(data);   // 打印传过来的数据
      }
    },
    success: function(res){
       // 成功跳转时的回调
       // 通过eventChannel向被打开的页面传送数据
       res.eventChannel.emit('testMap', { data: 'test1' });
    },
    fail: function(res){
       // 跳转失败时回调
    },
    complete:function(res){
       // 跳转结束时回调   成功或者失败都会执行
    },
});

// 目标页面 test.vue  页面操作
export dafault {
   onLoad:function(options){
      // 先接收上个页面传过来的参数  id和nama
      console.log(options.id);
      console.log(options.name);
      
      // 再接收上个页面通过events传过来的方法，并且传参回去给起始页面
      const eventChannel = this.$scope.eventChannel;   // 兼容了APP-NVUE写法
      const eventChannel = this.getOpenerEventChannel();  // 一般写法
      
      eventChannel.emit("someEvent", { data:"test" });  // 传参回去
      eventChannel.on("testMap", function(data){
          // 通过监听testMap事件  获取上一页面通过eventChannel传送到当前页面的数据
          console.log(data);  // test1
      });
   }
}

//  下面的uni.redirectTo、uni.reLaunch、uni.switchTab用法和这个差不多
//  只是这单个只有url、success、fail、complete选项

2、uni.redirectTo(obj)        关闭当前页面，跳转到应用内的某个页面

3、uni.reLaunch(obj)        关闭所有页面，打开到应用内的某个页面

4、uni.switchTab(obj)        跳转到tabBar页面（也就是pages.json文件里面配置的tabBar里面的一个页面），并关闭其他所有非tabBar的页面

5、uni.navigateBack(obj)    关闭当前页面，返回上一页面或多级页面

uni.navigateBack({
    // 配置delta参数即可  写数字
    delta: 1,    // 返回上一页面
    delta: 2,    // 返回前面两个页面
    //  依次类推，，如果给的数字大于了目前所打开了的页面数，则返回到首页
});

6、uni.preloadPage(obj)      页面预加载，优化技术，使打开的时候更快

uni.preloadPage({
    url:"./test",    // 先预加载 不会直接跳转
    complete:function(){
      // 预加载成功时的回调
    },
    fail:function(){
      // 预加载失败时的回调
    }
});


// uni.preloadPage({url: "/pages/test/test"}); // 预加载 /pages/test/test 页面（仅触发onLoad，onReady)
// uni.navigateTo({url: "/pages/test/test"}); // url匹配，跳转预加载页面（仅触发onShow)
// uni.navigateTo({url: "/pages/test/test?a=b"}); // url不匹配，正常打开新页面

四、传值（在小程序、app我们页面间传值一般都是用的API传值）

前面的在介绍uni.navgateTo时已经简单的介绍了传简单的值了，比如：

// 起始页面   跳到test.vue页面去
uni.navigateTo({
   url: "./test?id=2&name=xiao"
   //  参数和地址用?隔开   参数和参数之间用&符号隔开
});


// test.vue页面接收参数
export default {
  onLoad:function(options){
    console.log(options.id);   // 2
    console.log(options.name);  // xiao
  }
}

以上传值，会发现一个问题，假设我们有很多参数需要传怎么办呢？在uni-app官网有明确的规定url太长的话会跳转失败，一下就是解决办法，利用JSON的stringify、parse方法来解决

//  HTML代码
<template>
    <div>
        <button @click="clickEvent">点击我跳转页面</button>
    </div>
</template>


// 初始页面  跳到  test.vue页面
export defaul {
  data(){
   return:{
      testObj:{
        age:21,
        name:"xiaopang",
        height:"160",
      }
   }
  }
  methods:{
     clickEvent(){
        uni.navigateTo({
           url:"./test?test=" + encodeURIComponent(JSON.stringify(this.testObj)),
        });
      }
  }
}


// test.vue页面接收 test参数
export default {
   onLoad:function(options){
     let test = JSON.parse(decodeURIComponent(options.test));
   }
}

// 使用encodeURIComponent和decodeURIComponent都是为了对参数进行编码，
// 不然在跳转的时候出现一些特殊符号会出现跳转失败的情况