当前位置:网站首页>uniapp 路由与页面跳转
uniapp 路由与页面跳转
2022-08-10 02:46:00 【Little___Turtle】
目录
uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用
uni.navigateBack
可以返回到原页面。
OBJECT参数说明
参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 |
代码演示
index.vue
<template>
<view class="container">
<uni-tag text="跳转" @click="toDetails('数据')" type="primary" circle="true" ></uni-tag>
</view>
</template>
<script setup>
const toDetails=(data)=>{
//在起始页面跳转到details.vue页面并传递参数
uni.navigateTo({
url: "../details/details?data="+data
});
}
</script>
<style lang="scss">
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
details.vue
<template>
<view>
<h2>商品详情</h2>
</view>
</template>
<script setup>
import {onLoad} from '@dcloudio/uni-app';
//接收获取参数
onLoad((data)=>{
console.log(data);
})
</script>
<style>
</style>
运行效果
uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()
获取当前的页面栈,决定需要返回几层。
OBJECT参数说明
参数 | 类型 | 必填 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|---|
delta | Number | 否 | 1 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 | |
animationType | String | 否 | pop-out | 窗口关闭的动画效果,详见:窗口动画 | App |
animationDuration | Number | 否 | 300 | 窗口关闭动画的持续时间,单位为 ms | App |
代码演示
<template>
<view>
<h2>商品详情</h2>
<view class="btn">
<button type="primary" @click="toBack">返回上一页</button>
</view>
</view>
</template>
<script setup>
const toBack = () => {
uni.navigateBack({
delta: 1,
animationType: 'pop-out',
animationDuration: 200
});
}
</script>
<style>
</style>
运行效果
uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
注意: 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭,仅触发生命周期
onHide
OBJECT参数说明
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码演示
pages.json
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},{
"pagePath": "pages/user/user",
"text": "用户"
}]
}
index.vue
<template>
<view class="container">
<button type="default" @click="toDetails('数据')">navigateTo跳转tabBar个人中心</button>
<hr>
<button type="primary" @click="toUser()">switchTab跳转tabBar个人中心</button>
</view>
</template>
<script setup>
const toDetails=(data)=>{
//在起始页面跳转到user.vue页面并传递参数 不能跳底部导航页面
uni.navigateTo({
url: "../user/user?data="+data
});
}
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
const toUser=()=>{
uni.switchTab({
url: '../user/user'
});
}
</script>
<style lang="scss">
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
user.vue
<template>
<view>
<h2>用户页面</h2>
</view>
</template>
运行效果
点击第一个按钮
点击第二个按钮
边栏推荐
- State compression small experience
- MySQL: Introduction to Logging System | Error Log | Query Log | Binary Log: Bin-log Data Recovery Practice | Slow Log Query
- 从滑动标尺模型看企业网络安全能力评估与建设
- 2022.8.8 Exam questions for photographer Lao Ma (photographer)
- 【图像分类】2022-CycleMLP ICLR
- yolov5+usb相机
- Difference Between Data Mining and Data Warehousing
- Error state based Kalman filter ESKF
- 《天才基本法》:平行时空的第二次选择,小演员的表现意外出圈
- 2022/08/09 学习笔记 (day26) IO流
猜你喜欢
随机推荐
Arcgis进阶篇(1)——安装Arcgis Enterprise,创建sde库
【每日一题】大佬们进来看看吧
基于误差状态的卡尔曼滤波ESKF
三极管开关电路参数设计与参数介绍
实例048:数字比大小
2022.8.9 Exam Unique Bid Auction--800 Question Solutions
ArcGIS Advanced (1) - Install ArcGIS Enterprise and create an sde library
2022/08/09 学习笔记 (day26) IO流
what is a microcontroller or mcu
Little rookie Hebei Unicom induction training essay
跨站请求伪造(CSRF)攻击是什么?如何防御?
网页挖矿溯源?浏览器浏览历史查看工具Browsinghistoryview
MySQL: What MySQL optimizations have you done?
高精度加法
2022.8.8 Exam area link (district) questions
实例042:变量作用域
书法家唐效奇
Example 048: Number ratio size
使用curl指令发起websocket请求
Error state based Kalman filter ESKF