uni-app导航跳转

Uni中的导航跳转

navigator

页面链接
属性

属性名	默认值	说明
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	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能
navigateBack	对应 uni.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则会关闭当前页面跳转到下一个页面。

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
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>

uni.switchTab(object)

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

object参数说明

参数	说明
url	需要跳转的 tabBar 页面的路径（需在 pages.json 的 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>

uni.redirectTo(object)

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

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>

uni.navigateBack(object)

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

object参数说明

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

注意：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。