uniapp - 路由跳转及路由传值

灰太狼 2021-07-25 12:29 1591阅读 0赞

uniapp 中路由跳转

  • 一. 使用 navigator 组件跳转（无参数）
  • 二. 调用 API 编程式跳转跳转（无参数）
      1. uni.navigateTo(OBJECT)
      1. uni.switchTab(OBJECT)
      1. uni.redirectTo(OBJECT)
  • 三. 使用 navigator 组件跳转（传参数）
  • 四. 调用 API 编程式跳转跳转（传参数）

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
使用navigator 组件跳转官网：https://uniapp.dcloud.io/component/navigator
调用 API 跳转官网：https://uniapp.dcloud.io/api/router

一. 使用 navigator 组件跳转（无参数）

属性说明








































































属性名 类型 默认值 说明
url String 应用内的跳转链接，值为相对路径或绝对路径，如：”…/first/first”，”/pages/first/first”，注意不能加 .vue 后缀
open-type String navigate 跳转方式
delta Number 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
animation-type String pop-in/out 当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果。窗口动画
animation-duration Number 300 当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。
hover-class String navigator-hover 指定点击时的样式类，当hover-class=”none”时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间，单位毫秒
target String self 在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram

open-type 有效值


































值 说明
navigate 对应 uni.navigateTo 的功能
redirect 对应 uni.redirectTo 的功能
switchTab 对应 uni.switchTab 的功能
reLaunch 对应 uni.reLaunch 的功能
navigateBack 对应 uni.navigateBack 的功能
exit 退出小程序，target=”miniProgram”时生效
  • 跳转 tabbar 页面，必须设置 open-type="switchTab"

应用示例

  1. <template>
  2.     <view>
  3.         <!-- 跳转非 tabbar 页面，有返回按钮 -->
  4.         <navigator url="../detail/detail">跳转详情页</navigator>
  5.         <!-- 跳转至 tabbar 页面 -->
  6.         <navigator url="../message/message" open-type="switchTab">跳转message</navigator>
  7.         <!-- 跳转非 tabbar 页面，无返回按钮 -->
  8.         <navigator url="../detail/detail" open-type="redirect">跳转detail</navigator>
  9.     </view>
  10. </template>
  12. <script> export default { // 监听页面卸载 onUnload() { console.log("页面卸载了") } } </script>
  14. <style> </style>

二. 调用 API 编程式跳转跳转（无参数）

1. uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面。

OBJECT参数说明






























































参数 类型 必填 默认值 说明
url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType String 否 pop-in 窗口显示的动画效果。窗口动画
animationDuration Number 否 300 窗口动画持续时间，单位为 ms
events Object 否 页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

应用示例

  1. <template>
  2.     <view>
  3.         <!-- 跳转非 tabbar 页面，有返回按钮 -->
  4.         <button @click="toDetail">跳转至详情页</button>
  5.     </view>
  6. </template>
  8. <script> export default { // 监听页面卸载 onUnload() { console.log("页面卸载了") }, methods: { toDetail() { // 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 uni.navigateTo({ url: '../detail/detail' }) } } } </script>
  10. <style> </style>

2. uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

OBJECT参数说明




































参数 类型 必填 说明
url String 是 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

应用示例

  1. <template>
  2.     <view>
  3.         <!-- 跳转至 tabbar 页面 -->
  4.         <button @click="toMessage">跳转message</button>
  5.     </view>
  6. </template>
  8. <script> export default { // 监听页面卸载 onUnload() { console.log("页面卸载了") }, methods: { toMessage() { // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 uni.switchTab({ url: "../message/message" }) } } } </script>
  10. <style> </style>

3. uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明




































参数 类型 必填 说明
url String 是 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
success Function 否 接口调用成功的回调函数
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）

应用示例

  1. <template>
  2.     <view>
  3.         <!-- 跳转非 tabbar 页面，无返回按钮 -->
  4.         <button @click="toDetailByRedirect">跳转etail</button>
  5.     </view>
  6. </template>
  8. <script> export default { // 监听页面卸载 onUnload() { console.log("页面卸载了") }, methods: { toDetailByRedirect(){ // 关闭当前页面，跳转到应用内的某个页面。 uni.redirectTo({ url:'../detail/detail' }) } } } </script>
  10. <style> </style>

三. 使用 navigator 组件跳转（传参数）

传值页面

以?分割，?后面为页面所传递的值，多个值之间以& 间隔

  1. <template>
  2.     <view>
  3.         <navigator url="../detail/detail?id=10&name=test">跳转详情页</navigator>
  4.     </view>
  5. </template>

接收值页面

使用 onLoad 页面生命周期钩子接收传递过来的值

  1. <script> export default { onLoad(options) { console.log(options) } } </script>

四. 调用 API 编程式跳转跳转（传参数）

传值页面

以?分割，?后面为页面所传递的值，多个值之间以& 间隔

  1. export default {
  2.         methods: {
  3.             toDetail() {
  4.                 uni.navigateTo({
  5.                     url: '../detail/detail?id=10&name=test'
  6.                 })
  7.             }
  8.         }
  9.     }
  10. </script>

接收值页面

使用 onLoad 页面生命周期钩子接收传递过来的值

  1. <script> export default { onLoad(options) { console.log(options) } } </script>

发表评论

表情：
评论列表 （有 0 条评论，1591人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue路由跳转+路由传参

    之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。 比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。 而常见的写法就是： locat

    骑猪看日落骑猪看日落/ 0 赞/ 743 阅读