uni-app项目中的页面跳转方式

uniapp页面跳转

官方详情介绍
uni-app的页面跳转只能跳转本地页面，且目标页面必须在pages.json中注册。跳转方式与小程序/vue的极为相似，只是方法和标签有所不同，分为和两种。

一、标签跳转：

类似Vue的<router-link>标签

<navigator url="...?key=value">页面跳转</navigator>

二、事件方法跳转

类似Vue router.push({ path: 'xxx' }) 方法，uni-app提供了6钟不同的跳转方式，以uni.xxx方式调用。
官网详情

①uni.navigateTo(object)：

保留当前页面，跳转到应用内的某个页面，可使用uni.navigateBack返回到原页面
object参数说明（其他跳转方式的参数与之大同小异）：

uni.navigateTo(OBJECT)
e.g.

uni.navigateTo({
    url: 'route?key1=value1&key2=value2'   
});

接收数据（其他跳转方式的接收参数方法与之相同）：

onLoad: function (option) { 
  //option为object类型，会序列化上个页面传递的参数
  console.log(option.key1); //输出 value1
  console.log(option.key2); //输出 value2
}

②uni.redirectTo(object)：

关闭当前页面，跳转到应用内的某个页面 ，可理解为重定向页面

uni.redirectTo({
    url: 'route?key1=value1&key2=value2'   
});

③uni.reLaunch(object)：

关闭所有页面，跳转到应用内的某个页面
注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

uni.reLaunch({
    url:  'route?key1=value1&key2=value2'   
});

④uni.switchTab(object)：

跳转到tabBar页面，并 关闭所有非tabBar页面
注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

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

⑤uni.navigateBack(object)：

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

uni.navigateBack({
    delta: 3//返回上上上个页面
});

⑥uni.preloadPage：

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
平台差异说明：

image.png

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

e.g.

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的日历示例中增加了页面预载示例。