uniapp学习-路由跳转方式
概览:
- navigateTo (保留当前页面,跳转到其他页面,用navigateBack可以返回上一页)
- reLaunch (关闭所有页面,跳转到其他页面)
- redirectTo (关闭当前页面,跳转到其他页面)
- switchTab (适用于底部导航栏之间的跳转,或者跳转到底部导航栏)
- 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'
})
},
})