页面跳转的几种用法区别

简介: 一. my.navigateTo: 保留当前页面,跳转到应用内的某个页面,路径后可带参数;使用 abridge.navigateBack 可以返回到原页面; 示例代码:  my.navigateTo({ url: 'test?id=1' }) 二.

一. my.navigateTo: 保留当前页面,跳转到应用内的某个页面,路径后可带参数;使用 abridge.navigateBack 可以返回到原页面; 示例代码: 

 my.navigateTo({
      url: 'test?id=1'
    })

 二. my.redirectTo: 关闭当前页面,跳转到应用内的某个页面,路径后可带参数,但是不能返回原页面; 示例代码: 

my.redirectTo({
      url: 'test?id=1'
    })

  三. my.navigateBack: 关闭当前页面,返回上一页面或多级页面;可通过 Page.getCurrentPages 获取当前的页面栈,决定需要返回几层;返回的页面数,如果 delta 大于现有页面数,则返回到首页。 示例代码:  

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码 
// 此处是A页面
    my.navigateTo({ url: 'B?id=1' }) 
// 此处是B页面 
    my.navigateTo({ url: 'C?id=1' }) 
// 在C页面内 navigateBack,将返回A页面 
    my.navigateBack({ delta: 2 }) 
// 在C页面内 navigateBack,将返回A页面
     my.navigateBack({ delta: 2 })

  四. my.switchTab: 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;跳转的页面需要在app.json的tabBar中声明的页面且路径后不能带参数 app.json代码示例: 

// app.json
 { "tabBar": 
 { "items": 
 [{ "pagePath": "home", "name": "首页" },
 { "pagePath": "user", "name": "用户" }
 ] } }

  示例代码:  

 my.switchTab({
      url: '/home'
    })

 注意: 

1. 通过页面跳转或者页面重定向所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏;

 2. 调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会;

 3. my.navigateTo 和 my.redirectTo 不允许跳转到 tabbar 页面,只能用 my.switchTab 跳转到 tabbar 页面; 

4.my.switchTab跳转的页面需要在app.json的tabBar中声明的页面且路径后不能带参数; 如还有遗漏请留言补充,我会尽快更新,如果官方有新的内容我会及时关注更新,谢谢各位看官啦!

目录
相关文章
|
6月前
|
缓存 JavaScript 前端开发
Vue系列(二)之 基础语法上篇【插值,指令,过滤器,计算属性监听属性】以及购物车实现
Vue系列(二)之 基础语法上篇【插值,指令,过滤器,计算属性监听属性】以及购物车实现
|
15天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
21天前
跳转传参的方式
跳转传参的方式
|
21天前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
14 0
|
5月前
uniapp带参数跳转,新页面接收参数
uniapp带参数跳转,新页面接收参数
112 0
|
4月前
|
前端开发
react跳转传参方式
react跳转传参方式
20 0
|
4月前
原生写法:长按鼠标和单击的区别怎么写?用timeout解决
原生写法:长按鼠标和单击的区别怎么写?用timeout解决
|
4月前
SpringMVC之综合案例:参数传递,向页面传参,页面跳转
SpringMVC之综合案例:参数传递,向页面传参,页面跳转
24 0
|
4月前
|
JavaScript
Vue 路由跳转链式编程方式
Vue 路由跳转链式编程方式
|
4月前
POST请求传递参数(十一)
POST请求传递参数(十一)