uni-app 路由：页面导航与配置

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

uni-app 使用的是前端路由，它基于 Vue Router 实现。在 uni-app 中，路由配置主要在 pages.json 文件中进行，而不是传统的 router.js 或 router/index.js 文件。

路由配置

在 pages.json 文件中，你可以定义应用的页面路径和对应的组件。以下是一个简单的路由配置示例：

{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/logs/logs",
"style": {
"navigationBarTitleText": "日志"
}
}
]
}

在上面的配置中，定义了两个页面，分别是首页 (pages/index/index) 和日志页 (pages/logs/logs)。

路由跳转

在 uni-app 中，你可以使用 uni.navigateTo、uni.redirectTo、uni.switchTab 和 uni.navigateBack 等 API 进行页面跳转。

// 跳转到首页
uni.navigateTo({
url: '/pages/index/index'
});

// 跳转到日志页并关闭当前页面
uni.redirectTo({
url: '/pages/logs/logs'
});

// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.switchTab({
url: '/pages/home/home'
});

// 关闭当前页面，返回上一页面或多级页面
uni.navigateBack({
delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
});

嵌套路由

uni-app 支持嵌套路由，即在一个页面内可以嵌套另一个页面。嵌套路由的配置需要在 pages.json 中进行，通过在页面配置中添加 subPackages 字段来实现。

注意事项

• 路由路径应以 / 开头。
• 使用 uni.navigateTo 跳转时，目标页面不能是 tabBar 页面，如果是 tabBar 页面应使用 uni.switchTab。
• 使用 uni.redirectTo 跳转时，会关闭当前页面，不会保留当前页面的历史记录。
• 使用 uni.navigateBack 可以实现多级页面返回。

通过合理配置路由和使用路由跳转 API，可以实现应用内页面间的灵活导航。