一、使用 navigator 组件跳转(无参数)
- 跳转 tabbar 页面,必须设置
open-type="switchTab"
<view>
<!-- 跳转非 tabbar 页面,有返回按钮 -->
<navigator url="../detail/detail">跳转详情页</navigator>
<!-- 跳转至 tabbar 页面 -->
<navigator url="../message/message" open-type="switchTab">跳转message</navigator>
<!-- 跳转非 tabbar 页面,无返回按钮 -->
<navigator url="../detail/detail" open-type="redirect">跳转detail</navigator>
</view>
二. 调用 API 编程式跳转跳转(无参数)
uniapp页面跳转的多个方法 - JS方法
navigateTo, redirectTo 只能打开非 Tab
页面,可传参
。
switchTab 只能打开Tab
页面,不可传参
。
reLaunch 可以打开任意页面,可传参
。
methods: {
fn1(){
//保留当前页面,跳转到应用内的某个页面
uni.navigateTo({
url: '/pages/drugs/drugManage'
})
},
fn2(){
//关闭当前页面,返回上一页面或多级页面。
uni.navigateBack({
delta:1
});
},
fn3(){
//关闭所有页面,打开到应用内的某个页面(可带参数)
uni.reLaunch({
url:'./home/index'
});
},
fn3(){
//关闭当前页面,跳转到应用内的某个页面。
uni.redirectTo({
url:'/pages/about/about'
});
},
fn4(){
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '../tabbor/index/index'
});
},
fn5(){
//调用第三方程序打开指定的URL
boid plus.runtime.openURL('https://www.baidu.com/')
}
}
Uniapp打开外部网页、跳转指定链接
Uniapp打开外部网页、跳转指定链接 (打开app以外的web页面)
<web-view src="https://baidu.rudon.cn/"></web-view>
<template>
<view>
<web-view src="https://baidu.rudon.cn/"></web-view>
</view>
</template>
三. 使用 navigator 组件跳转(传参数)
传值页面
以?
分割,?
后面为页面所传递的值,多个值之间以&
间隔
<view>
<navigator url="../detail/detail?id=10&name=test">跳转详情页</navigator>
</view>
接收值页面
使用 onLoad
页面生命周期钩子接收传递过来的值
<script>
export default {
onLoad(options) {
console.log(options)
}
}
</script>
四. 调用 API 编程式跳转跳转(传参数)
传值页面
以?
分割,?
后面为页面所传递的值,多个值之间以&
间隔
toDetail() {
uni.navigateTo({
url: '../detail/detail?id=10&name=test'
})
}
接收值页面
使用 onLoad
页面生命周期钩子接收传递过来的值
onLoad(options) {
console.log(options)
}
通过跳转传值一般套路就是在URL中把需要传的值带过去,然后再接收的页面onLoad函数中,利用参数接回来。
//跳转页面
uni.navigateTo({
url:'页面路径?id=1'
})
uni.navigateTo({
url:'/pages/foodDetail/index?foodId='+ JSON.stringify(e),
})
注意:
传入键值对的值为对象需要使用JSON.stringify才可以在跳转的页面接收到想要的值,
键值对的值为简单数据可以不用
//接收页面
onLoad: function (option) {
//option为object类型,会序列化上个页面传递的参数
console.log(option.id);
//传递的是id=1,则获取到的就是option.id
}
案例:
跳转获取到值再返回给页面
第一个页面
//选择疾病
chooseDrug(){
uni.navigateTo({
url:'/pages/chooseDrug?names=drugText&ids=drugId'
})
},
第二个页面
onLoad(option) {
if(option?.names){
this.names=option.names;
}
if(option?.ids){
this.ids=option.ids;
}
},
methods:{
//跳转选择疾病
jumps(data){
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 当前页页面实例
let nowPage = pages[ pages.length - 1];
// 上一页页面实例
let prevPage = pages[ pages.length - 2 ];
// 修改上一页data里面的值
prevPage.$vm[this.names] = data.drugName;
prevPage.$vm[this.ids] = data.drugNo;
// uni.navigateTo跳转的返回,默认1为返回上一级
uni.navigateBack({
delta: 1
});
}
}