uni-app导航跳转

页面链接
属性

属性名	默认值	说明
url		应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	navigate	跳转方式
delta		当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
animation-type	pop-in/out	当 open-type 为 navigate、navigateBack 时有效
animation-duration	300	窗口显示/关闭动画的持续时间
hover-class	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-start-time	50	按住后多久出现点击态，单位毫秒
hover-stay-time	600	手指松开后点击态保留时间，单位毫秒
target	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram

open-type有效值

值	说明
navigate	对应的功能
redirect	对应的功能
switchTab	对应的功能
reLaunch	对应的功能
navigateBack	对应的功能
exit	退出小程序，target="miniProgram"时生效

页面跳转
跳转非tabbar页面

<template>
 <view>
 	<view>导航跳转学习</view>
 	<navigator url="/pages/detail/index">跳转至详情页面</navigator>
 </view>
</template>

跳转tabbar页面
跳转tabbar页面，必须设置open-type=“switchTab”

<template>
 <view>
 	<view>导航跳转学习</view>
 	<navigator url="/pages/detail/detail" open-type="switchTab">跳转至信息页面</navigator>
 </view>
</template>

注意：如果把open-type里面的值设置为redirect则会关闭当前页面跳转到下一个页面。

保留当前页面，跳转到应用内的某个页面，使用可以返回到原页面。
object参数说明

参数	说明
url	需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数
animationType	窗口显示的动画效果
animationDuration	窗口动画持续时间
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

示例：

<template>
 <view>
 	<view>导航跳转学习</view>
 	<button @click="goDetail">跳转至详情页面</button>
 </view>
</template>

<script>
 export default{
  methods:{
   goDetail(){
   	uni.navigateTo({
   		url:'/pages/detail/detail'
   	})
   }
  }
 }
</script>

跳转至tabbar页面，并关闭其他所有非tabbar页面

object参数说明

参数	说明
url	需要跳转的 tabBar 页面的路径（需在的 tabBar 字段定义的页面），路径后不能带参数
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

<template>
 <view>
 	<view>导航跳转学习</view>
 	<button @click="goIndex">跳转至详情页面</button>
 </view>
</template>

<script>
 export default{
  methods:{
   goIndex(){
   	uni.switchTab({
   		url:'/pages/detail/Index'
   	})
   }
  }
 }
</script>

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

object参数说明

参数	说明
url	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数
success	接口调用成功的回调函数
fail	接口调用失败的回调函数
complete	接口调用结束的回调函数（调用成功、失败都会执行）

<template>
 <view>
 	<view>导航跳转学习</view>
 	<button @click="goRedire">跳转至详情并关闭当前页面</button>
 </view>
</template>

<script>
 export default{
  methods:{
   goRedire(){
   	uni.redirectTo({
   		url:'/pages/detail/Index'
   	})
   }
  }
 }
</script>

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

object参数说明

参数	说明
delta	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationType	窗口关闭的动画效果
animationDuration	窗口关闭动画的持续时间，单位为 ms

注意：

秒客网