UniApp小程序如何路由跳转方式

navigator 组件类似HTML中的 组件,但只能跳转本地页面。目标页面必须在pages.json中注册。open-type默认是navigate的方式,接收页面也是采用Onload方法接收

<!--navigator 下面pages有绑定底部导航栏就跳不了了 navigate-->
<!--navigator默认跳转方式 navigate-->
<navigator url="/pages/auth/login" open-type="navigate">
  <button> 直接跳转</button>
</navigator>
<navigator :url="'/pages/auth/login?params='+ encodeURIComponent(JSON.stringify({id:1,name:'蒋皓洁',text:'呀呀呀呀'}))" open-type="navigate">
  <button> 带参数跳转</button>
</navigator>
<navigator url="/pages/order/order" open-type="redirect">
  <button type="default">打开redirect的订单页面</button>
</navigator>

<!--navigator 下面pages有绑定底部导航栏可跳 navigate-->
<navigator url="/pages/category/category" open-type="switchTab">
  <button type="default">打开tabBar的订单页面</button>
</navigator>

注意:

在pages.json填写一下代码

记了要更改路径哦!!!

{
  "pages": [
    //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/test/test",
      "style": {
        "navigationBarTitleText": "列表"
      }
    }
}
  • 参数
一、uni.switchTab (OBJECT)
uni.switchTab({
url:../login/login
})*
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

二、uni.navigateTo(OBJECT)
uni.navigateTo({undefined
url:../login/login?name=${参数}
})
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

三、uni.redirectTo(OBJECT)
uni.redirectTo({undefined
url:../login/login?name=${参数}
})
关闭当前页面,跳转到应用内的某个页面。

四、uni.reLaunch(OBJECT)
uni.reLaunch({undefined
url:../login/login?name=${参数}
})
关闭所有页面,打开到应用内的某个页面。

五、uni.navigateBack(OBJECT)
uni.navigateBack({undefined
url:../login/login?name=${参数}
})
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

六、uni.preloadPage(OBJECT)
uni.preloadPage({undefined
url:../login/login
})
预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。

参考

posted @ 2022-04-23 21:26  天使阿丽塔  阅读(1053)  评论(0编辑  收藏  举报