uniapp学习-路由跳转方式

概览：

1. navigateTo  (保留当前页面，跳转到其他页面，用navigateBack可以返回上一页)
2. reLaunch    (关闭所有页面，跳转到其他页面)
3. redirectTo （关闭当前页面，跳转到其他页面）
4. switchTab （适用于底部导航栏之间的跳转，或者跳转到底部导航栏）
5. location.href  （跳转到外部链接）

注意：

• navigateTo，redirectTo 只能打开非 tabBar 页面
• switchTab 只能打开tabBar页面
• reLaunch 可以打开任意页面
• 页面底部的tabBar由页面决定，只要是定义位tabBar的页面，底部都有tabBar

实例应用

1.uni.navigateTo

使用uni.navigateBack可以返回到原页面

• 页面跳转路径有层级限制，不能无限制跳转新页面
• 跳转到 tabBar 页面只能使用 switchTab 跳转

uni.navigateTo({
	url: '/pages/notice/notice'
})

2.uni.navigateBack

关闭当前页面，返回上一页面或多级页面。

• 可通过 getCurrentPages()方法 获取当前的页面栈，决定需要返回几层。
• 常用参数delta，默认为1，含义是：返回的页面数，如果 delta 大于现有页面数，则返回到首页。

uni.navigateTo({
    delta: 1
});

3.uni.switchTab

跳转到 tabBar 页面

• 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
• 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面,只能跳转到tabBar页面。

//page.json文件配置
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",  顶部导航名称
				"navigationBarBackgroundColor":"rgb(0,154,251)",//顶部导航背景色
				"navigationBarTextStyle":"white"//顶部导航字体颜色
			}
		},
	]
}
//页面用法
uni.switchTab({
    url: '/pages/index/index'
});

4.reLaunch

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

• 需要跳转的应用内页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
• 转到 tabBar 页面则不能带参数
• H5端调用uni.reLaunch之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。
• 如果调用了 uni.preloadPage() 不会关闭，仅触发生命周期 onHide

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

5.redirectTo

关闭当前页面，跳转到其他页面

• 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
• 转到 tabBar 页面只能使用 switchTab 跳转

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

路由传参

1.路由拼接

具体可以看上面的内容

2.全局变量

在main.js注册全局变量

// 例如我用的是vue框架，先在main.js文件注册变量myName
Vue.prototype.myName= '玛卡巴卡';
// 在目标文件读取全局变量，注意全局变量不要与我们在当前页声明的变量名重复
let name = this.myName; // 玛卡巴卡

3.本地存储

建议使用uni.setStorageSync，这个是同步，不会出现去了目标页面取值取不到的问题，uni.setStorage是异步存值，获取值也是一样建议使用uni.getStorageSync

//在页面设置缓存
let data = {key:'name',value:'hello'}
uni.setStorageSync({
	key:'setName',
	data:data
})
//在目的页面读取并销毁
uni.getStorageSync({
	key: 'setName',
	success: (res) => {
		console.log(res)  // ==>{key:'name',value:'hello'}
		uni.removeStorage({
			key:'setName'
		})
	},
})