方式一:声明式导航
声明式导航,通过组件进行跳转。官方文档:详情
使用navigator
组件进行页面跳转。
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
url | String | 应用内的跳转链接,值为相对路径或绝对路径,如:“…/first/first”,“/pages/first/first”,注意不能加 .vue 后缀 | |
open-type | String | navigate | 跳转方式 |
-
open-type
有效值值 说明 navigate 保留当前页面,跳转到应用内的某个页面。 对应 uni.navigateTo 的功能 redirect 跳转到详情页,并关闭当前页面。 对应 uni.redirectTo 的功能 switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 对应 uni.switchTab 的功能 reLaunch 对应 uni.reLaunch 的功能 navigateBack 对应 uni.navigateBack 的功能 exit 退出小程序,target="miniProgram"时生效 <template> <view> <navigator url="/pages/detail/detail">跳转至详情页</navigator> <!-- 跳转至TabBar页面需要属性 switchTab --> <navigator url="/pages/message/message" open-type="switchTab">跳转至信息页</navigator> </view> </template>
方式二:编程式导航
编程式导航,通过 API 进行跳转。官方文档:详情
uni.navigateTo
保留当前页面,跳转到应用内的某个页面,通过
uni.navigateTo
可以返回原页面。
uni.navigateTo 参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’,path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数 |
animationType | String | 否 | 窗口显示的动画效果,详见:窗口动画 |
animationDuration | Number | 否 | 窗口动画持续时间,单位为 ms |
events | Object | 否 | 页面间通信接口,用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
<template>
<view>
<button type="default" @click="goDetail">跳转至详情页</button>
</view>
</template>
<script>
export default {
methods: {
goDetail() {
uni.navigateTo({
url: '../detail/detail'
})
}
}
}
</script>
uni.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
注意: 如果调用了 uni.preloadPage(OBJECT) 不会关闭,仅触发生命周期onHide
。
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
uni.redirectTo
关闭当前页面,跳转到应用内的某个页面。
注意:跳转到 tabBar 页面只能使用 switchTab 跳转。
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’ |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
<template>
<view>
<button type="default" @click="redirectDetail">跳转到详情页,并关闭当前页面</button>
</view>
</template>
<script>
export default {
methods: {
redirectDetail() {
uni.redirectTo({
url: '/pages/detail/detail?id=80'
})
}
},
onUnload() {
console.log('导航页面已卸载')
}
}
</script>
路由跳转传参
通过 url 地址进行传参,再通过 onload 生命周期函数的 options 参数进行接收。
- 多个参数之间用
&
进行连接。
-
声明式导航
通过url后面加
?参数=值
进行传参,多个参数之间用&
进行连接。<template> <view> <!-- 通过url后面加 ?参数=值 进行传参 --> <navigator url="/pages/detail/detail?id=80">跳转至详情</navigator> </view> </template>
<!-- 通过onload生命周期函数中的options值进行接收 --> <script> export default { onload(options) { console.log(options) } } </script>
-
编程式导航
通过url后面加
?参数=值
进行传参,多个参数之间用&
进行连接。<template> <view> <button type="default" @click="goDetail">跳转至详情页</button> </view> </template> <script> export default { methods: { goDetail() { uni.navigateTo({ url: '/pages/detail/detail?id=80&age=18' }) } } } </script>
<!-- 通过onload生命周期函数中的options值进行接收 --> <script> export default { onload(options) { console.log(options) } } </script>