uni-app 路由与页面跳转

朴灿烈づ我的快乐病毒、 2023-05-30 08:57 23阅读 0赞

uni-app 路由与页面跳转

uni.navigateTo
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
|  |  ||--|--||  |  |

示例

  1. //在起始页面跳转到test.vue页面并传递参数
  2. uni.navigateTo({
  3. url: 'test?id=1&name=uniapp'
  4. });
  5. // 在test.vue页面接受参数
  6. export default {
  7. onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
  8. console.log(option.id); //打印出上个页面传递的参数。
  9. console.log(option.name); //打印出上个页面传递的参数。
  10. }
  11. }

url有长度限制,太长的字符串会传递失败,可使用窗体通信,全局变量或encodeURLComponent等多种方式解决,如下为encodeURLComponent示例。

  1. <navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
  2. // 在test.vue页面接受参数
  3. onLoad: function (option) {
  4. const item = JSON.parse(decodeURIComponent(option.item));
  5. }

注意:

  • 页面跳转路径有层级限制,不能无限制跳转新页面。
  • 跳转到tabBar页面只能使用switchTab跳转
  • 路由API的目标页面必须是在pages.json里注册的vue页面,如果想打开web url,在App平台可以使用plus.runtime.openURL或web-view组件,H5平台使用window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。在hello uni-app中有个组件ulink.vue已对多端进行封装,可参考。

uni.redirectTo(OBJECT)
在这里插入图片描述
示例

  1. uni.redirectTo({
  2. url: 'test?id=1'
  3. });

注意:
跳转到tabBar页面只能使用switchTab跳转

uni.reLaunch(OBJECT)
在这里插入图片描述

示例:

  1. uni.reLaunch({
  2. url: 'test?id=1'
  3. });
  4. export default {
  5. onLoad: function (option) {
  6. console.log(option.id);
  7. }
  8. }

uni.switchTab(OBJECT)

跳转到tabBar页面,并关闭其他所有非tabBar页面。

在这里插入图片描述
示例

pages.json

  1. {
  2. "tabBar": {
  3. "list": [{
  4. "pagePath": "pages/index/index",
  5. "text": "首页"
  6. },{
  7. "pagePath": "pages/other/other",
  8. "text": "其他"
  9. }]
  10. }
  11. }

other.vue

  1. uni.switchTab({
  2. url: '/pages/index/index'
  3. });

uni.navigateBack(OBJECT)

关闭当前页面,返回上一级页面或多级页面,可通过getCurrentPage()获取当前页页面栈,决定需要返回几层。

在这里插入图片描述
示例

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

Tips:

  • navigateTo,redirectTo 只能打开非tabBar页面。
  • switchTab只能打开tabBar页面。
  • reLaunch可以打开任意页面。
  • 页面底部的tabBar由页面决定,即只要是定义为tabBar的页面,底部都有tabBar
  • 不能在App.vue里面进行页面跳转
  • H5端页面刷新之后页面栈会消失,此时navigationBack不能返回,如果一定要返回可以使用history.back()。

参考事项

页面路由拦截和管理,插件市场有很多封装好的工具类,搜索路由。

窗口动画

本API仅支持App支持,小程序自身不支持自定义动画,H5的窗体动画可使用常规单页动画处理方案。

窗口的显示/关闭动画效果,支持在API、组件、pages.json中配置,优先级为:API=组件>page.json.

API
有效的路由API

  • navigateTo
  • navigateBack

    uni.navigateTo({

    1. url: '../test/test',
    2. animationType: 'pop-in',
    3. animationDuration: 200

    });
    uni.navigateBack({

    1. delta: 1,
    2. animationType: 'pop-out',
    3. animationDuration: 200

    });

组件
open-type有效值

  • navigateTo
  • navigateBack

    navigator
    navigator

pages.json

pages.json 中配置的是窗口显示的动画

  1. "style": {
  2. "app-plus": {
  3. "animationType": "fade-in",
  4. "animationDuration": 300
  5. }
  6. }

显示动画与关闭动画,会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型,则不会使用默认的类型。

在这里插入图片描述

详细的窗口动画说明,请参考:

  • 窗口显示的动画:AnimationTypeShow
  • 窗口关闭的动画:AnimationTypeClose

注意

纯nvue项目(render为native),窗体动画默认进入动画为popin,返回为pop-out。如果想修改动画类型,只能通过uni.navigateTo API修改,在组件或pages.json里配置动画类型无效
非纯nvue项目,App端窗体动画,默认进入动画为slider-in-right,默认返回动画为pop-out

发表评论

表情:
评论列表 (有 0 条评论,23人围观)

还没有评论,来说两句吧...

相关阅读