javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > uniapp路由跳转

uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)

作者:huangfuyk

uni-app有两种方式进行路由跳转,下面这篇文章主要给大家介绍了关于uniapp常用路由跳转的几种方式(navigateTo、redirectTo...),文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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

示例代码如下:

uni.navigateTo({
	url:'./home/index'
});

注意:

页面跳转路径有层级限制,不能无限制跳转新页面跳转到 tabBar 页面只能使用 switchTab 跳转路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,具体可参考【uniapp官方-路由与页面跳转】

2. uni.navigateBack(关闭当前页面,返回上一页面或多级页面)

示例代码如下:

// 在第3级页面内 navigateBack,将返回第一层页面
uni.navigateBack({
	delta: 2
});

注意:

3. redirectTo(关闭当前页面,跳转到其他页面)

示例代码如下:

uni.redirectTo({
	url:'./home/index'
})

注意:

4. reLaunch(关闭所有页面,跳转到其他页面)

示例代码如下:

uni.reLaunch({
	url:'./home/index'
})

注意:

5. switchTab(适用于底部导航栏之间的跳转,或者跳转到底部导航栏(跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。))

示例代码如下:

uni.switchTab({
	url: './home/index'
});

注意:

更多细节,可参考:【uniapp官方-路由与页面跳转】

补充:uni-app中的一些路由跳转区别

总结一下

navigateTo,redirectTo只能打开非tabBar页面(例如列表到详情)

switchTab只能打开tabBar页面(tabBar之间的传参等)

reLaunch可以打开任意页面

页面底部的tabBar由页面决定,就是只要时定义为tabBar的页面,底部都有tabBar,不能再App.vue里面进行页面跳转

uni.navigateTo({
url:'跳转的路径?id=xxx&alue=xxx',
})
传递的参数在跳转到的页面可以在onLoad:function(option){
option就是传递的参数
}

需要跳转的应用内非tabBar的页面,其实就是在pages.json里面配置的页面都不能跳转详情请看官网uni-app路由跳转

注意:

1:页面跳转路径有层级限制,不能无限制跳转新页面

2:跳转到 tabBar 页面只能使用 switchTab 跳转

uni.redirectTo({
url:'跳转的路径'
需要跳转的应用内非tabBar的页面的路径,
})

注意是关闭当前页面,跳转到应用内的某个页面,跳转到 tabBar 页面只能使用 switchTab 跳转

uni.reLaunch({
    url: 'test?id=1'
});

关闭所有页面,打开到应用内的某个页面。如果跳转的页面路径是 tabBar 页面则不能带参数。

uni.switchTab({
    url: '/pages/index/index'
    需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
});

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

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});
// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
    delta: 2
});

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

总结

到此这篇关于uniapp常用路由跳转的几种方式的文章就介绍到这了,更多相关uniapp路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文