uniapp页面参数传递

╰半橙微兮° 2022-04-25 07:02 913阅读 0赞

# uniapp页面参数传递 #

**简介**uniapp传递参数，和获取参数。

首先 链接传递 或者事件传递  
  
1、要传递参数的页面

<table> 
 <tbody> 
  <tr> 
   <td> <p><br> &lt;navigator&nbsp;:url="&nbsp;'./nav?index='+navData"&gt;点击传递参数&lt;/navigator&gt;<br> &nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

2、接收的页面

<table> 
 <tbody> 
  <tr> 
   <td> <p><br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;onLoad(options) { <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;console.log(options。index)<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br> &nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

事件传递多个参数，传递数组用事件来传递，因为要先转成字符串  
  
1、在页面中定义要传递

<table> 
 <tbody> 
  <tr> 
   <td> <p><br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;button&nbsp;@click="dataClick"&gt;点击传递数据&lt;/button&gt;<br><br><br> 添加一个事件<br><br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;methods: { <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;dataClick(){ <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;let&nbsp;that =&nbsp;this;<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var&nbsp;navData = JSON.stringify(that.navData);&nbsp;// 这里转换成 字符串<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;uni.navigateTo({ <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;url:'./nav?index='+navData<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;})<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br><br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;},<br> &nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

2、接收的页面

<table> 
 <tbody> 
  <tr> 
   <td> <p><br> 这里一定onLoad ，只能用onLoad才能接收到参数<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;onLoad(options) { <br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var data = JSON.parse(options.index); // 字符串转对象<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;console.log(data)<br> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br> &nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>