uni-app uni中的导航跳转

uni中的导航跳转

声明式跳转(借助我们组件进行跳转)

就用到了我们的导航组件(navigator)

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："…/first/first"，"/pages/first/first"，注意不能加 .vue 后缀

测试:

<template>
    <div>
        <view>导航跳转的学习</view>
        <navigator url="/pages/message/message">跳转至'信息页'</navigator>
    </div>
</template>

但是如果你跳转至有tabBar的页面就不行了

而且在在微信小程序中控制台也不会报错

你得加上一个open-type:

属性名	类型	默认值	说明	平台差异说明
open-type	String	navigate	跳转方式

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

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

redirect:

<template>
    <div>
        <view>导航跳转的学习</view>
        <navigator url="/pages/message/message" open-type="redirect">跳转至'信息页'</navigator>
    </div>
</template>

如果我们把open-type的值设置成redirect，这样就会把当前的页面进行关闭，再跳转到下一个页面

测试(是否销毁了):

export default{
    onUnload(){
        console.log('跳转前的页面卸载了')
    }
}

利用编程式导航进行跳转(借助api进行跳转)

定义一个按钮

<button @click="gotoStor">跳转至'本地存储数据'</button>

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

参数	类型	必填	默认值	说明	平台差异说明
url	String	是		需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationType	String	否	pop-in	窗口显示的动画效果，详见：窗口动画	App
animationDuration	Number	否	300	窗口动画持续时间，单位为 ms	App
events	Object	否		页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

gotoStor(){
    uni.navigateTo({
    	url:'/pages/req/Stor'
	})
}

那跳转到tabBar的页面:

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

OBJECT参数说明

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

object.success 回调函数

参数

Object res

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

gotoReq(){
	uni.switchTab({
    	url: '/pages/req/req'
	})
}

我们跳转至tabBar页面前一个页面被卸载了,因为

uni.redirectTo(OBJECT)

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

OBJECT参数说明

参数	类型	必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

redirectStor(){
    uni.redirectTo({
		url:'/pages/req/Stor'
    })
}

导航跳转传递参数

声明式跳转传参

<navigator url="/pages/message/message?id=100">跳转至'信息页'</navigator>

传多个参数

<navigator url="/pages/message/message?id=100&name='我'">跳转至'信息页'</navigator>

message接收参数

onLoad(options){
	console.log(options)
}

这个options就是我们上一级传过来的参数

{id: "100"}

编程式导航传参和声明式跳转传参是一样的

uni.navigateTo({
	url:'/pages/req/Stor?id=200&name=我'
})