uniapp开发路由跳转

目录

底部导航栏

内置api跳转

uni.navigateTo

uni.redirectTo

uni.reLaunch

uni.switchTab

使用页面链接

底部导航栏

pages.json

"tabBar": {
		"color": "#f5deb3",
		"selectedColor": "#f0e68c",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/image/首页.png",
			
				"selectedIconPath": "static/image/首页_HL.png"
				
			},
			{
				"pagePath": "pages/record/record",
				"iconPath": "static/image/记录.png",
				"selectedIconPath": "static/image/记录_HL.png"
			},
			{
				"pagePath": "pages/me/me",
				"iconPath": "static/image/我的.png",
				"selectedIconPath": "static/image/我的_HL.png"
			}
		]
	},

内置api跳转

uni.navigateTo

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

// 在某个事件触发时跳转到指定页面，并传递参数
uni.navigateTo({
  url: '/pages/targetPage/targetPage?param1=value1&param2=value2'
});

uni.redirectTo

关闭当前页面，跳转到应用内的某个页面，使用uni.navigateBack不可返回到原页面

// 在某个事件触发时关闭当前页面并跳转到指定页面
uni.redirectTo({
  url: '/pages/targetPage/targetPage'
});

uni.reLaunch

关闭所有页面，打开到应用内的某个页面

// 在某个事件触发时关闭所有页面并打开指定页面
uni.reLaunch({
  url: '/pages/targetPage/targetPage'
});

uni.switchTab

跳转到应用内的某个 tabBar 页面，并关闭其他所有非 tabBar 页面

// 在某个事件触发时跳转到 tabBar 页面
uni.switchTab({
  url: '/pages/tabBarPage/tabBarPage'
});

使用页面链接

在页面中直接使用<navigator>标签定义链接，并设置url属性为目标页面路径，用户点击时将触发页面跳转

<!-- 在页面模板中定义链接 -->
<navigator url="/pages/targetPage/targetPage">跳转到目标页面</navigator>