uni-app 中的路由与页面跳转

uni-app 中的路由与页面跳转

通过组件进行跳转

通过 navigator 组件进行跳转

属性说明

open-type 有效值

注意

• navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},​​<navigator>​​ 的子节点背景色应为透明色。
• app-nvue 平台只有纯nvue项目（render为native）才支持​​<navigator>​​。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。
• app下退出应用，Android平台可以使用​​plus.runtime.quit​​

示例 ​​查看示例​​

// navigate.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

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

// navigate.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

注意

• 跳转tabbar页面，必须设置open-type="switchTab"

通过编程式导航进行跳转

uni.navigateTo(OBJECT)

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

OBJECT参数说明

示例

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

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

// 在test.vue页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

注意：

• 页面跳转路径有层级限制，不能无限制跳转新页面
• 跳转到 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)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明

示例

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

注意：

• 跳转到 tabBar 页面只能使用 switchTab 跳转

uni.reLaunch(OBJECT) 

关闭所有页面，打开到应用内的某个页面。

注意： 如果调用了 ​​uni.preloadPage(OBJECT)​​​ 不会关闭，仅触发生命周期 ​​onHide​​

OBJECT参数说明

示例

uni.reLaunch({
    url: 'test?id=1'
});

export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}

Tips：

• H5端调用​​uni.reLaunch​​​之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时​​navigateBack​​​不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用​​history.back()​​仍然可以导航到浏览器的其他历史记录。

uni.switchTab(OBJECT)

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

注意： 如果调用了 ​​uni.preloadPage(OBJECT)​​​ 不会关闭，仅触发生命周期 ​​onHide​​

OBJECT参数说明

示例

pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue

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

uni.navigateBack(OBJECT)

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

OBJECT参数说明

示例

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

Tips：

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

参考事项

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

uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

平台差异说明

​​H5 平台​​

预加载 /pages/test/test 对应的js文件，不执行页面预渲染逻辑

uni.preloadPage({url: "/pages/test/test"});

​​App-nvue 平台​​

预加载nvue页面 /pages/test/test

uni.preloadPage({url: "/pages/test/test"});

注意事项

1. App平台仅支持预加载 nvue 页面，执行页面预渲染，预载时触发生命周期​​onLoad​​​，​​onReady​​​，不触发​​onShow​​
2. 打开新页面时，url 完全相同（包含参数）时，优先使用预加载页面，触发生命周期 onShow
3. tabbar页面，仅支持预加载尚未显示过的页面，否者返回 fail，提示 already exists
4. 同一时间，相同 url 仅 preloadPage 一次
5. 当同一个预载页面已被打开(在路由栈)，再次打开相同url时，不再使用该预加载页面，而是打开新的非预载页面
6. ​​uni.reLanuch​​​,​​uni.switchTab​​​,​​uni.navigateBack​​​(含Android返回键) 切换页面时，预加载页面不会被销毁，仅触发生命周期​​onHide​​
7. 在预载页面使用​​uni.redirectTo​​​ 时，预加载页面会被销毁，触发生命周期​​onUnload​​

示例

uni.preloadPage({url: "/pages/test/test"}); // 预加载 /pages/test/test 页面（仅触发onLoad，onReady)
uni.navigateTo({url: "/pages/test/test"}); // url匹配，跳转预加载页面（仅触发onShow)
uni.navigateTo({url: "/pages/test/test?a=b"}); // url不匹配，正常打开新页面

HBuilderX 2.7.12+的hello uni-app，在navigator示例和uni ui的日历示例中增加了页面预载示例。

uni.unPreloadPage(OBJECT)

取消预载页面。

1. 仅App-nvue支持
2. 当预载页面未被打开时，使用​​unPreloadPage​​​时会销毁该页面，触发生命周期​​onUnload​​
3. 当预载页面已被打开时，使用​​unPreloadPage​​时不销毁该页面，但该预加载页面不再继续存在，会随着路由变化而销毁

窗口动画

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

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

​​API​​

有效的路由 API

• navigateTo
• navigateBack

uni.navigateTo({
    url: '../test/test',
    animationType: 'pop-in',
    animationDuration: 200
});
uni.navigateBack({
    delta: 1,
    animationType: 'pop-out',
    animationDuration: 200
});

​​组件​​

open-type 有效值

• navigateTo
• navigateBack

navigator
navigator

​​pages.json​​

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

"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}

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

详细的窗口动画说明，请参考：

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

注意

• 纯nvue项目（render为native），窗体动画默认进入动画为popin，返回为pop-out。如果想修改动画类型，只能通过uni.navigateTo API修改，在组件或pages.json里配置动画类型无效
• 非纯nvue项目，App端窗体动画，默认进入动画为slider-in-right，默认返回动画为pop-out
• webview 中嵌入 uni-app H5时，使用 uni.webView.navigateTo... 跳转页面