在传统的uni-app
开发中,我们被限制在手动维护pages.json
文件中,以定义页面和页面样式特性。然而,随着应用程序复杂度的增加,这种方式会显著增加开发者的心智负担。面对庞大的项目和频繁的页面更新,pages.json
的管理变得非常繁琐和不便。
然而,幸运的是,采用uni-simple-router
后,这些问题迎刃而解。uni-simple-router
为我们提供了一种更灵活、更高效的方式来处理页面路由。不再依赖于pages.json
,我们可以动态地创建页面路由,甚至允许构建复杂的页面结构,如动态路由和嵌套路由等。
创建一个传统页面
传统方案
// pages.json
{
"pages": [
{
"path": "pages/index/index"
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
使用 uni-simple-router
// router.js
const router = createRouter({
routes:[{
path:`/`,
component:__dynamicImportComponent__(`@/pages/index/index.vue`,{
pageType:`top`
})
}]
})
// pages.json
{
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
阅读须知
为了减轻阅读复杂度,我们去除了一些非必要的代码,仅提供了绝对有用的部分。如果你想了解详细,可以参考从显示 Hello Word 开始。
在uni-simple-router
中注册页面非常简单和方便。要注册一个页面,只需使用__dynamicImportComponent__
辅助函数,并传入所需的组件即可。这样做会使页面组件根据不同平台进行编译,以适应各种环境。
此外,当注册顶级页面时,你还可以轻松配置uni-app
的页面样式,支持所有uni-app
页面样式的设置,详细你可以在这里查看到。
为顶级页面设置样式
正如前文所述,当你在uni-simple-router
中注册一个顶级页面时,该页面会继承uni-app
的所有属性和事件。这使得在__dynamicImportComponent__
函数中设置页面的样式和其他属性与在pages.json
文件中设置样式效果一样,依然有效。
传统方案
// pages.json
{
"pages": [{
"path"