路由

uni-app 页面路由为框架统一管理，开发者需要在 pages.json 里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同。

路由跳转

uni-app 有两种页面路由跳转方式：

1. 调用 API 跳转。
2. 使用 <navigator> 组件跳转。

页面栈

框架以栈的形式管理当前所有页面。

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/>

提示

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在首页 onReady 之前进行页面跳转。

页面通信

传递 SearchParams

传值

uni.navigateTo({
  url: '/pages/search/search?kw=123',
})

接值

// 通过 onLoad 生命周期的 options 参数接收
onLoad(options) {
  console.log(options.kw)
}

uni 自定义事件

• uni.$emit(eventName,OBJECT)：触发全局的自定义事件。附加参数都会传给监听器回调。
• uni.$on：监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
• uni.$once(eventName,callback)：监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
• uni.$off(eventName,callback)：移除全局自定义事件监听器。

// pageA.vue
uni.$emit('update', { msg: '页面更新' })

// pageB.vue
uni.$on('update', function (data) {
  console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg)
})