uniApp：路由与页面跳转及传参

方式一：声明式导航

声明式导航，通过组件进行跳转。官方文档：详情
使用 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>