唐山建站方案,netcompont网站建站,织梦模板网站怎么上线,网站建设学什么UniApp路由与页面跳转详解#xff1a;API调用与Navigator组件实战
路由
uniapp页面路由为框架统一管理#xff0c;开发者需要在page.json里面配置每个路由页面的路径及页面样式。
路由跳转
uniapp有两种页面路由跳转方式#xff0c;调用API跳转和navigator组件跳转。
调…UniApp路由与页面跳转详解API调用与Navigator组件实战
路由
uniapp页面路由为框架统一管理开发者需要在page.json里面配置每个路由页面的路径及页面样式。
路由跳转
uniapp有两种页面路由跳转方式调用API跳转和navigator组件跳转。
调用API跳转
navTo(){/* 跳转到非tabbar页面 */uni.navigateTo({url:/pages/auth/login,// 目标页面注意页面要在 pages.json 的 pages 数组中配置了animationType: slide-in-bottom, // 打开页面动画仅App支持。当前 从下往上 打开animationDuration: 300, // 窗口动画持续时间单位为 ms, 默认300ms})
},效果 传递参数对应页面结束获取参数通过onload的option获取 传递
methods: {navTo(){/* 跳转到非tabbar页面 */uni.navigateTo({url:/pages/auth/login?id1namewuyong,// 目标页面注意页面要在 pages.json 的 pages 数组中配置了animationType: slide-in-bottom, // 打开页面动画仅App支持。当前 从下往上 打开animationDuration: 1000, // 窗口动画持续时间单位为 ms, 默认300ms})},}接收
templateview登录页面/view
/templatescriptexport default {data() {return {}},onLoad(option) {//通过option接受其他页面带过来的参数console.log(id,option)console.log(name,option.name)},methods: {}}
/scriptstyle/style
效果
传递对象
传参
methods: {
navTo(){const params {id: 1, name: wuyong}uni.navigateTo({url: /pages/auth/login?params JSON.stringify(params)})},
}接收参数
onLoad(option) {const params JSON.parse( option.params )console.log(params.id, params.name)
},效果
url有长度限制太长的字符串会传递失败使用encodeURIComponent方式解决
传参通过encodeURIComponent进行编码
navTo(){// 3. url有长度限制太长的字符串会传递失败使用encodeURIComponent方式解决const params {id: 1, name: wuyong, desc: xxxxxxxxxx}uni.navigateTo({url: /pages/auth/login?params encodeURIComponent(JSON.stringify(params))})
},接收参数通过decodeURIComponent解码
// login.vue 页面接收参数
onLoad (option) {const params JSON.parse(decodeURIComponent(option.params))console.log(params.id, params.name, params.desc)
},效果 uni.redirectTo()重定向页面关闭当前页面跳转到应用内的某个页面返回不到原页面。 注意跳转到tabBar页面只能使用switchTab跳转。
methods: {toOrderPage(){const params {id:1,name:wuyong}uni.redirectTo({url:/pages/order/order?paramsJSON.stringify(params)})}
}接收跳转过来携带的参数
onLoad(option) {const params JSON.parse(option.params)console.log(params.id,params.name)
},效果 uni.reLaunch(Obj)关闭所有页面打开到应用内的某个页面导航后退按钮无法后退跳转到目的也无后退按钮。 跳转
methods: {toOrderPage(){const params {id:1,name:wuyong}uni.reLaunch({url:/pages/order/order?paramsJSON.stringify(params)})}
}接收
onLoad(option) {const params JSON.parse(option.params)console.log(params.id,params.name)
},效果无后退按钮 uni.switchTab(Object) 跳转到 tabBar 页面并关闭其他所有非 tabBar 页面。
// index.vue 页面methods: {// 跳转分类标签页toCategoryPage() {uni.switchTab({url: /pages/category/category})}}uni.navigateBack(Object) 关闭当前页面返回上一页面或多级页面。
uni.navigateBack({delta: 1 // 返回的页面数, 1后退上一页面animationType: slide-out-bottom, // 后退动画animationDuration: 300
})效果
navigator 组件跳转
使用navigator 组件类似HTML中的a标签但只能跳转到本地页面目标页面必须在pages.json中注册 方式一
navigator :url/pages/auth/login?paramsencodeURIComponent(JSON.stringify({id:1,name:wuyong,desc: xxxxxxxxxx}))button typedefault登录/button
/navigator效果 方式二、
navigator url/pages/order/order open-typeredirectbutton typedefault订单/button
/navigator效果 方式三、
navigator url/pages/category/index hover-classred-hover open-typeswitchTab hover-stay-time1000view typedefault分类/view
/navigator效果 项目开发中常用跳转完结~
