uni-app页面跳转传递参数
<h1 id="uni-app页面跳转传递参数">uni-app页面跳转传递参数</h1><h2 id="navigator"><navigator></h2>
<p>首先来看看官网给的介绍：</p>
<h4 id="navigator官网介绍">navigator官网介绍</h4>
<p>页面跳转。</p>
<p>该组件类似HTML中的<code><a></code>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。</p>
<p>该组件的功能有API方式，另见：https://uniapp.dcloud.io/api/router?id=navigateto(opens new window)</p>
<p><strong>属性说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">属性名</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">url</td>
<td style="text-align: left">String</td>
<td style="text-align: left"></td>
<td style="text-align: left">应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 <code>.vue</code> 后缀</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">open-type</td>
<td style="text-align: left">String</td>
<td style="text-align: left">navigate</td>
<td style="text-align: left">跳转方式</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">delta</td>
<td style="text-align: left">Number</td>
<td style="text-align: left"></td>
<td style="text-align: left">当 open-type 为 'navigateBack' 时有效，表示回退的层数</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">animation-type</td>
<td style="text-align: left">String</td>
<td style="text-align: left">pop-in/out</td>
<td style="text-align: left">当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画</td>
<td style="text-align: left">App</td>
</tr>
<tr>
<td style="text-align: left">animation-duration</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">300</td>
<td style="text-align: left">当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。</td>
<td style="text-align: left">App</td>
</tr>
<tr>
<td style="text-align: left">hover-class</td>
<td style="text-align: left">String</td>
<td style="text-align: left">navigator-hover</td>
<td style="text-align: left">指定点击时的样式类，当hover-class="none"时，没有点击态效果</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">hover-stop-propagation</td>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">false</td>
<td style="text-align: left">指定是否阻止本节点的祖先节点出现点击态</td>
<td style="text-align: left">微信小程序</td>
</tr>
<tr>
<td style="text-align: left">hover-start-time</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">50</td>
<td style="text-align: left">按住后多久出现点击态，单位毫秒</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">hover-stay-time</td>
<td style="text-align: left">Number</td>
<td style="text-align: left">600</td>
<td style="text-align: left">手指松开后点击态保留时间，单位毫秒</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">target</td>
<td style="text-align: left">String</td>
<td style="text-align: left">self</td>
<td style="text-align: left">在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram</td>
<td style="text-align: left">微信2.0.7+、百度2.5.2+、QQ</td>
</tr>
</tbody>
</table>
<p><strong>open-type 有效值</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left">值</th>
<th style="text-align: left">说明</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">navigate</td>
<td style="text-align: left">对应 uni.navigateTo 的功能</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">redirect</td>
<td style="text-align: left">对应 uni.redirectTo 的功能</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">switchTab</td>
<td style="text-align: left">对应 uni.switchTab 的功能</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">reLaunch</td>
<td style="text-align: left">对应 uni.reLaunch 的功能</td>
<td style="text-align: left">字节跳动小程序与飞书小程序不支持</td>
</tr>
<tr>
<td style="text-align: left">navigateBack</td>
<td style="text-align: left">对应 uni.navigateBack 的功能</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">exit</td>
<td style="text-align: left">退出小程序，target="miniProgram"时生效</td>
<td style="text-align: left">微信2.1.0+、百度2.5.2+、QQ1.4.7+</td>
</tr>
</tbody>
</table>
<p><strong>注意</strong></p>
<ul>
<li>跳转tabbar页面，必须设置open-type="switchTab"</li>
<li>navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <code><navigator></code> 的子节点背景色应为透明色。</li>
<li>navigator-<code>open-type</code>属性 如果使用对应的值，则对应值的功能会高于对应跳转路径。</li>
<li>app-nvue 平台只有纯nvue项目（render为native）才支持 <code><navigator></code>。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。</li>
<li>app下退出应用，Android平台可以使用plus.runtime.quit (opens new window)。iOS没有退出应用的概念。</li>
<li>uLink组件 (opens new window)是navigator组件的增强版，样式上自带下划线，功能上支持打开在线网页、其他App的schema、mailto发邮件、tel打电话。</li>
</ul>
<h2 id="案例">案例</h2>
<h3 id="遍历数组带上选中的一条中的数据进行跳转">遍历数组，带上选中的一条中的数据进行跳转</h3>
<p><mark><strong>这种写法好像只有微信开发者工具支持，APP和其它平台不支持</strong></mark><br>
<strong>应用场景，订单列表跳转，单据列表点击跳转</strong></p>
<p>fm是一个数组，里面存放的是数个对象，每一个对象就是一个表单信息，所以要展示所有表单信息，就用v-for将所有表单信息都遍历出来。但是又要设计每个表单都可以实现跳转，展示表单详情；所以页面跳转时就要专递该表单的信息到新页面。传递该表单的主键到新页面，再由接口出查询。</p>
<p><strong>为什么不直接将所有信息直接传递过去呢？</strong></p>
<p><mark>因为URL写法有长度限制！！！！！</mark></p>
<pre><code class="language-vue"><view style="margin-left: 20px; margin-bottom: 10px;" class="body2" v-for="(item,index) in fm">
<view style="padding: 10px; float: left; width: 70%; height: 100%;">
<view style="height: 50%;" class="item">
<text style="font-weight:bold; font-size: 18px;">申请单编号：</text>
<navigator :url="'./ApplyDetails?bill_code={{item.pk_hi_stapply}}'" hover-class="navigator-hover" >
<text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
</navigator>
</view>
<view style="height: 50%;" class="item">
<text style="font-weight:bold; font-size: 18px;">申请日期：</text>
<text style="font-size: 15px;">{{ item.apply_date }}</text>
</view>
</view>
<!-- 单据状态 -->
<view class="item flex" style=" align-items: center; justify-content: center; float: right; width: 30%; height: 100%;">
<text style="font-weight:bold; font-size: 18px;">{{ item.approve_state }}</text>
</view>
</view>
</code></pre>
<p>具体如下：</p>
<pre><code class="language-vue"><navigator url="./ApplyDetails?bill_code={{item.pk_hi_stapply}}" hover-class="navigator-hover" >
<text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
</navigator>
</code></pre>
<p>写法上跟官网给的写法一致，可是编译器会报错，但是程序依旧可以正常编译出来。</p>
<p>错误如下：</p>
<pre><code class="language-vue">16:29:04.096 Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
16:29:04.097 (Emitted value instead of an instance of Error)
16:29:04.102 Errors compiling template:
16:29:04.103 url="./ApplyDetails?bill_code={{item.bill_code}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
16:29:04.117 115| <view style="height: 50%;" class="item">
16:29:04.125 116| <text style="font-weight:bold; font-size: 18px;">申请单编号：</text>
16:29:04.126 117| <navigator url="./ApplyDetails?bill_code={{item.bill_code}}" hover-class="navigator-hover" >
16:29:04.134 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
16:29:04.136 118| <text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
16:29:04.158 119| </navigator>
16:29:04.162at E:\SOS\SOS.BGAPP\pages\DHR\DimissionApply.vue:0
</code></pre>
<p><strong>为了不让编译器报错，写法可以如下;</strong></p>
<pre><code class="language-vue"><navigator :url="'./ApplyDetails?bill_code={{item.pk_hi_stapply}}'" hover-class="navigator-hover" >
<text style="font-size: 15px; font-weight:600;">{{ item.bill_code }}</text>
</navigator>
</code></pre>
<h2 id="补充">补充</h2>
<h3 id="带上当前页面的多条数据进行跳转">带上当前页面的多条数据进行跳转</h3>
<p>以上方法仅适用于遍历数组，传递该数组的数据时使用。</p>
<p>如果想传递页面中的其它数据，甚至是多条数据，就需要使用，官方文档中的方法</p>
<pre><code class="language-js">uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
</code></pre>
<p>将其进行一个简单封装，比如：</p>
<pre><code class="language-js">navdata(){
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
}
</code></pre>
<p>但是这种方法传递的是固定的值，而不是变量。在接收页面输出会输出为</p>
<pre><code>export default {
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}
}
//打印结果为
//1
//uniapp
</code></pre>
<p>如果想传递变量可以使用如下方法：<code>detalis()为点击事件</code> 放入method中;</p>
<p><mark>比较重要的是，URL只能传递字符串，如果是对象或者是数组，就需要先将其转换为字符串再进行传递</mark></p>
<pre><code class="language-js"> navData(){
var navdata = {
workno : this.workno,
pk_hi_stapply : this.pk_hi_stapply
}
this.navdata = navdata;
},
details(){
this.navData();
var mynavdata = JSON.stringify(this.navdata)
uni.navigateTo({
url:"./test?data="+mynavdata,
})
}
</code></pre>
<p>接收端这样写：将接收到的JSON字符串转换为对象</p>
<pre><code class="language-js">export default {
onLoad(option) {
_self = this;
var navdata = JSON.parse(option.data)
_self.workno = navdata.workno;
_self.pk_hi_stapply = navdata.pk_hi_stapply;
},
}
</code></pre>
<p>然后在需要跳转的view中添加该方法的点击事件进行调用</p>
<pre><code class="language-vue"><view @onclik="details()">
</view>
</code></pre><br><br>
来源：https://www.cnblogs.com/wzx-blog/p/16652069.html
頁:
[1]