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和nameevents:{// 为指定事件添加一个监听器  获取被打开页面传送到当前页面的数据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和namaconsole.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);   // 2console.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都是为了对参数进行编码，
// 不然在跳转的时候出现一些特殊符号会出现跳转失败的情况

uni-app页面跳转以及传值相关推荐

uni app页面跳转后，刷新页面参数丢失问题
正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785 浏览器刷新之后就编程这样子:htt ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
uni中使用select标签后生成APP页面跳转空白
uni中使用select标签后生成APP页面跳转空白最近再用webstrom时,写uni APP时发现一个问题当生成apk后,带有select选择器标签的页面突然无法显示一片空白. 报错显示:Ca ...
【Android基础】页面跳转与传值(Activity跳转与传值)
一个Android应用程序很少会只有一个Activity对象,如何在多个Activity之间进行跳转,而且能够互相传值是一个很基本的要求. 本次我们就讲一下,Android中页面跳转以及传值的几种方式 ...
iOS——使用StroryBoard页面跳转及传值
之前在网上搜iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思 ...
h5 移动开发 html页面跳转,iosh5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
微信小程序两个页面跳转，传值
微信小程序两个页面跳转,传值在小程序界面,需要点击后跳转界面并且传递一个值. 具体实现如下:首先在wxml界面需要绑定事件,绑定需要传的值 a.wxml `<view bindtap=&quo ...
vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
vue 移动端跳转页面_Vue 仿微信 app 页面跳转动画
独立开发者在开发移动端产品时,为了更高效,通常会使用 Web 技术来开发移动端项目,可以同时适配 Android.iOS.H5,稍加改动还可适配微信小程序. 在使用 Vue.js 开发移动端页面的时候 ...
Vue仿微信app页面跳转动画
独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面的时候,默认的组 ...

uni-app页面跳转以及传值

uni-app页面跳转以及传值相关推荐

最新文章

热门文章