成成果果 發表於 2019-5-21 18:30:00

Uni-app页面路由区分注意事项

<p><span style="color: rgba(255, 0, 0, 1)">总结Tips：</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">&nbsp;（1）navigateTo，redirectTo 只能打开非 tabBar页面</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">&nbsp;（2）switchTab只能打开 TabBar 页面</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">&nbsp;（3）reLaunch可以打开任意界面</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">&nbsp;（4）页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有tabBar</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">&nbsp;（5）不能在 App.vue 里面进行页面跳转</span></p>
<h1>uni.navigateTo( OBJECT) —— <span style="color: rgba(255, 0, 0, 1)">保留当前页面，跳转到应用内的某个页面</span>，使用&nbsp; uni.navigateBack&nbsp; 可以返回到原来页面</h1>
<p>ONJECT参数说明：</p>
<table style="height: 285px; width: 707px" border="0" align="center">
<tbody>
<tr style="background-color: rgba(245, 245, 245, 1)" align="center">
<td>参数</td>
<td>类型</td>
<td>必填</td>
<td>默认值</td>
<td>说明</td>
<td>平台差异说明</td>
</tr>
<tr align="center">
<td>url</td>
<td>String</td>
<td>是</td>
<td>&nbsp;</td>
<td>
<p><span style="color: rgba(255, 0, 0, 1)">需要跳转的应用内非tabBar的页面路径，路径后可以带参数</span>。参数与路径之间使用 ? 分隔，参数键与参数值用 = 连接，不同的参数用 &amp; 分隔；</p>
<p>例如：' path?key=value&amp;key2=value2 '，path为跳转的目标页面路径，目标页面的onLoad函数可以得到传递的参数</p>
</td>
<td>&nbsp;</td>
</tr>
<tr align="center">
<td>animationType</td>
<td>String</td>
<td>否</td>
<td>pop-in</td>
<td>窗口现实的动画效果</td>
<td>5+APP</td>
</tr>
<tr align="center">
<td>animationDuration</td>
<td>Number</td>
<td>否</td>
<td>300</td>
<td>窗口动画持续时间，单位为ms</td>
<td>5+APP</td>
</tr>
<tr align="center">
<td>success</td>
<td>Function</td>
<td>否</td>
<td>&nbsp;</td>
<td>接口调用成功的回调函数</td>
<td>&nbsp;</td>
</tr>
<tr align="center">
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>&nbsp;</td>
<td>接口调用失败的回调函数</td>
<td>&nbsp;</td>
</tr>
<tr align="center">
<td>complete</td>
<td>Function</td>
<td>否</td>
<td>&nbsp;</td>
<td>接口调用结束的回调函数（成功、失败都会执行）</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>注意：</p>
<p>　　页面跳转路径有层级限制，不能无限跳转新页面</p>
<p>　　跳转到 tabBar 页面只能使用 switchTab 跳转</p>
<p>　　<span style="color: rgba(255, 0, 0, 1)">不能在 <span style="color: rgba(0, 0, 0, 1)">App.vue</span> 文件里进行页面跳转</span></p>
<p>　　路由API的目标页面必须是在 pages.json 里注册的vue页面。如果想打开 web url，在APP平台可以使用&nbsp; &nbsp;<span style="text-decoration: underline">plus.runtime.openURL</span>&nbsp; 或 web-view组件；H5平台使用 window.open ；小程序平台使用web-view组件（url需在小程序的联网白名单里）。</p>
<h1>uni.redirectTo( OBJECT )——<span style="color: rgba(255, 0, 0, 1)">关闭当前页面</span>，跳转到应用内的某个页面</h1>
<p>OBJECT参数说明</p>
<table style="height: 203px; width: 493px" border="0" align="center">
<tbody>
<tr style="background-color: rgba(245, 245, 245, 1)" align="center">
<td>参数</td>
<td>类型</td>
<td>必填</td>
<td>说明</td>
</tr>
<tr align="center">
<td>url</td>
<td>String</td>
<td>是</td>
<td>
<p>需要跳转的应用内非tabBar的页面路径，路径后可以带参数，。参数与路径之间使用 ? 分隔，参数键与参数值用 = 连接，不同的参数用 &amp; 分隔；</p>
<p>例如：' path?key=value&amp;key2=value2 '</p>
</td>
</tr>
<tr align="center">
<td>success</td>
<td>Function</td>
<td>否</td>
<td>接口调用成功的回调函数</td>
</tr>
<tr align="center">
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr align="center">
<td>complete</td>
<td>Function</td>
<td>否</td>
<td>接口调用结束的回调函数（成功、失败都会执行）</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h1>uni.reLaunch（ OBJECT ）——<span style="color: rgba(255, 0, 0, 1)">关闭所有页面</span>，打开到应用内的某个页面</h1>
<p>OBJECT参数说明</p>
<table style="height: 209px; width: 516px" border="0" align="center">
<tbody>
<tr style="background-color: rgba(245, 245, 245, 1)" align="center">
<td>参数</td>
<td>类型</td>
<td>必填</td>
<td>说明</td>
</tr>
<tr align="center">
<td>url</td>
<td>String</td>
<td>是</td>
<td>
<p>需要跳转的应用内非tabBar的页面路径，路径后可以带参数，。参数与路径之间使用 ? 分隔，参数键与参数值用 = 连接，不同的参数用 &amp; 分隔；</p>
<p>例如：' path?key=value&amp;key2=value2 '，<span style="color: rgba(255, 0, 0, 1)">如果跳转的页面是tabBar页面则不能带参数</span></p>
</td>
</tr>
<tr align="center">
<td>success</td>
<td>Function</td>
<td>否</td>
<td>接口调用成功的回调函数</td>
</tr>
<tr align="center">
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr align="center">
<td>complete</td>
<td>Function</td>
<td>否</td>
<td>接口调用完成的回调函数（成功、失败都会调用）</td>
</tr>
</tbody>
</table>
<h1>uni.switchTab（OBJECT）——<span style="color: rgba(255, 0, 0, 1)">跳转到 tabBar页面，并关闭其他所有非 tabBar 页面</span></h1>
<p>OBJECT参数说明</p>
<table style="height: 144px; width: 581px" border="0" align="center">
<tbody>
<tr style="background-color: rgba(245, 245, 245, 1)" align="center">
<td>参数</td>
<td>类型</td>
<td>必填</td>
<td>说明</td>
</tr>
<tr align="center">
<td>url</td>
<td>String</td>
<td>是</td>
<td>需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），<span style="color: rgba(255, 0, 0, 1)">路径后不能带参数</span></td>
</tr>
<tr align="center">
<td>success</td>
<td>Function</td>
<td>否</td>
<td>接口调用成功的回调函数</td>
</tr>
<tr align="center">
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>接口调用失败的回调函数</td>
</tr>
<tr align="center">
<td>fail</td>
<td>Function</td>
<td>否</td>
<td>接口调用完成的回调函数（成功、失败都会调用）</td>
</tr>
</tbody>
</table>
<p>uni.navigateBack（OBJECT）——关闭当前页面，返回上一级或多级页面，可通过 getCurrentPages( ) 获取当前页面栈，决定需要返回几层</p>
<p>OBJECT参数说明</p>
<table style="height: 111px; width: 528px" border="0" align="center">
<tbody>
<tr>
<td>参数</td>
<td>类型</td>
<td>必填</td>
<td>默认值</td>
<td>说明</td>
<td>平台差异说明</td>
</tr>
<tr>
<td>delta</td>
<td>Number</td>
<td>否</td>
<td>1</td>
<td>返回的页面数，如果delta大于现有页面数，则返回到首页</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>animationType</td>
<td>String</td>
<td>否</td>
<td>pop-out</td>
<td>窗口关闭的动画效果</td>
<td>5+APP</td>
</tr>
<tr>
<td>
<p>animationDuration</p>
</td>
<td>Number</td>
<td>否</td>
<td>300</td>
<td>窗口关闭动画的持续时间，单位为 ms</td>
<td>5+APP</td>
</tr>
</tbody>
</table><br><br>
来源：https://www.cnblogs.com/edward-life/p/10901578.html
頁: [1]
查看完整版本: Uni-app页面路由区分注意事项