uni-app 导航组件 navigator
<p>navigator：页面跳转</p><p>属性说明</p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>String</td>
<td> </td>
<td>应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 <code>.vue</code> 后缀</td>
<td> </td>
</tr>
<tr>
<td>open-type</td>
<td>String</td>
<td>navigate</td>
<td>跳转方式</td>
<td> </td>
</tr>
<tr>
<td>delta</td>
<td>Number</td>
<td> </td>
<td>当 open-type 为 'navigateBack' 时有效，表示回退的层数</td>
<td> </td>
</tr>
<tr>
<td>animation-type</td>
<td>String</td>
<td>pop-in/out</td>
<td>当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画</td>
<td>App</td>
</tr>
<tr>
<td>animation-duration</td>
<td>Number</td>
<td>300</td>
<td>当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。</td>
<td>App</td>
</tr>
<tr>
<td>hover-class</td>
<td>String</td>
<td>navigator-hover</td>
<td>指定点击时的样式类，当hover-class="none"时，没有点击态效果</td>
<td> </td>
</tr>
<tr>
<td>hover-stop-propagation</td>
<td>Boolean</td>
<td>false</td>
<td>指定是否阻止本节点的祖先节点出现点击态</td>
<td>微信小程序</td>
</tr>
<tr>
<td>hover-start-time</td>
<td>Number</td>
<td>50</td>
<td>按住后多久出现点击态，单位毫秒</td>
<td> </td>
</tr>
<tr>
<td>hover-stay-time</td>
<td>Number</td>
<td>600</td>
<td>手指松开后点击态保留时间，单位毫秒</td>
<td> </td>
</tr>
<tr>
<td>target</td>
<td>String</td>
<td>self</td>
<td>在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram</td>
<td>微信2.0.7+、百度2.5.2+、QQ</td>
</tr>
</tbody>
</table>
<div class="cnblogs_code">
<pre><template>
<view>
<button type="default" @click="skip">客服页面</button>
</view>
</template>
<script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
}
},
methods: {
skip:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
uni.navigateTo({
url:</span>'/pages/about/customer'<span style="color: rgba(0, 0, 0, 1)">
});
}
}
}
</span></script>
<style>
</style></pre>
</div>
<p>参数传递：</p>
<div class="cnblogs_code">
<pre><script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
}
},
methods: {
skip:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
uni.navigateTo({
url:</span>'/pages/about/customer?name=kefu&age=18'<span style="color: rgba(0, 0, 0, 1)">
});
}
}
}
</span></script></pre>
</div>
<p>接收端：</p>
<div class="cnblogs_code">
<pre><template>
<View><span style="color: rgba(0, 0, 0, 1)">
{{name}}</span>---<span style="color: rgba(0, 0, 0, 1)">{{age}}
</span></View>
</template>
<script><span style="color: rgba(0, 0, 0, 1)">
export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">{
age:</span>''<span style="color: rgba(0, 0, 0, 1)">,
name:</span>''<span style="color: rgba(0, 0, 0, 1)">
}
},
onLoad: </span><span style="color: rgba(0, 0, 255, 1)">function</span> (option) { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">option为object类型，会序列化上个页面传递的参数</span>
console.log(option.age); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">打印出上个页面传递的参数。</span>
console.log(option.name); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">打印出上个页面传递的参数。</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.age=<span style="color: rgba(0, 0, 0, 1)">option.age;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.name=<span style="color: rgba(0, 0, 0, 1)">option.name;
}
}
</span></script>
<style>
</style></pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/2259678/202102/2259678-20210207100727133-1053044671.png"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/ckfuture/p/14384042.html
頁:
[1]