uniapp - 路由跳转及路由传值

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

### uniapp 中路由跳转 ###

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

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

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

**属性说明**

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

**open-type 有效值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">navigate</td> 
   <td align="left">对应 uni.navigateTo 的功能</td> 
  </tr> 
  <tr> 
   <td align="left">redirect</td> 
   <td align="left">对应 uni.redirectTo 的功能</td> 
  </tr> 
  <tr> 
   <td align="left">switchTab</td> 
   <td align="left">对应 uni.switchTab 的功能</td> 
  </tr> 
  <tr> 
   <td align="left">reLaunch</td> 
   <td align="left">对应 uni.reLaunch 的功能</td> 
  </tr> 
  <tr> 
   <td align="left">navigateBack</td> 
   <td align="left">对应 uni.navigateBack 的功能</td> 
  </tr> 
  <tr> 
   <td align="left">exit</td> 
   <td align="left">退出小程序，target="miniProgram"时生效</td> 
  </tr> 
 </tbody> 
</table>

*  跳转 tabbar 页面，必须设置 `open-type="switchTab"`

**应用示例**

<template>
    	<view>
    		
    		<navigator url="../detail/detail">跳转详情页</navigator>
    		
    		<navigator url="../message/message" open-type="switchTab">跳转message</navigator>
    		
    		<navigator url="../detail/detail" open-type="redirect">跳转detail</navigator>
    	</view>
    </template>
    
    <script> export default { // 监听页面卸载 onUnload() { console.log("页面卸载了") } } </script>
    
    <style> </style>

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

## 1. uni.navigateTo(OBJECT) ##

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

**OBJECT参数说明**

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

**应用示例**

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

## 2. uni.switchTab(OBJECT) ##

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

**OBJECT参数说明**

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

**应用示例**

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

## 3. uni.redirectTo(OBJECT) ##

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

**OBJECT参数说明**

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

**应用示例**

<template>
    	<view>
    		
    		<button @click="toDetailByRedirect">跳转etail</button>
    	</view>
    </template>
    
    <script> export default { // 监听页面卸载 onUnload() { console.log("页面卸载了") }, methods: { toDetailByRedirect(){ // 关闭当前页面，跳转到应用内的某个页面。 uni.redirectTo({ url:'../detail/detail' }) } } } </script>
    
    <style> </style>

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

**传值页面**

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

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

**接收值页面**

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

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

**传值页面**

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

export default {
    		methods: {
    			toDetail() {
    				uni.navigateTo({
    					url: '../detail/detail?id=10&name=test'
    				})
    			}
    		}
    	}
    </script>

**接收值页面**

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

[https_uniapp.dcloud.io_component_navigator]: https://uniapp.dcloud.io/component/navigator
[https_uniapp.dcloud.io_api_router]: https://uniapp.dcloud.io/api/router