|
在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都是为了对参数进行编码，
// 不然在跳转的时候出现一些特殊符号会出现跳转失败的情况
|