uni-simple-router

主题

On this page

高效实现uni-app页面路由模块化 ​

在传统的uni-app开发中，我们被限制在手动维护pages.json文件中，以定义页面和页面样式特性。然而，随着应用程序复杂度的增加，这种方式会显著增加开发者的心智负担。面对庞大的项目和频繁的页面更新，pages.json的管理变得非常繁琐和不便。

然而，幸运的是，采用uni-simple-router后，这些问题迎刃而解。uni-simple-router为我们提供了一种更灵活、更高效的方式来处理页面路由。不再依赖于pages.json，我们可以动态地创建页面路由，甚至允许构建复杂的页面结构，如动态路由和嵌套路由等。

创建一个传统页面 ​

传统方案 ​

json
// pages.json { "pages": [  { "path": "pages/index/index" } ],  "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }

使用 uni-simple-router ​

js
// router.js const router = createRouter({  routes:[{  path:`/`,  component:__dynamicImportComponent__(`@/pages/index/index.vue`,{  pageType:`top`   })  }] })
json
// 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文件中设置样式效果一样，依然有效。

传统方案 ​

json
// pages.json { "pages": [{  "path": "pages/index/index",  "style": {  "navigationBarTitleText":"uni-simple-router",   "navigationBarBackgroundColor":"#42b883",   "navigationBarTextStyle":"white"  }  }],  "globalStyle": {  "navigationBarTextStyle": "black",  "navigationBarTitleText": "uni-app",  "navigationBarBackgroundColor": "#F8F8F8",  "backgroundColor": "#F8F8F8"  } }

使用 uni-simple-router ​

js
// router.js const router = createRouter({  routes:[{  path:`/`,  component:__dynamicImportComponent__(`@/pages/index/index.vue`,{  pageType:`top`,  style:{   navigationBarTitleText:`uni-simple-router`,   navigationBarBackgroundColor:`#42b883`,   navigationBarTextStyle:`white`   }   })  }] })
json
// pages.json {  "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }

创建页面组件分包 ​

除了能根据不同平台适配导入组件，__dynamicImportComponent__函数还允许你在该函数中设置组件分包。

假设你现在有如下两个页面配置：

js
// router.js const router = createRouter({  routes:[{  path:`/`,  component:__dynamicImportComponent__(`@/pages/index/index.vue`,{  pageType:`top`,  package: {   type: `child`  },   })  },{  path:`/pkg1`,  component:__dynamicImportComponent__(`@/pkg/pkg1/index.vue`,{  pageType:`top`,  package: {   type: `child`,  name: `pkg/pkg1`  },   })  }] })

相当于在 pages.json 文件中配置 subPackages 字段一样：

json
{  "subPackages": [  {  "root": "pkg/pkg1",  "pages": [{  "path": "index",  }]  },   {  "root": "pages",  "pages": [{  "path": "index/index",  }]  }  ], }

如需了解详细，请查看 将导入的组件分包

创建嵌套页面结构 ​

在uni-app开发中，对于嵌套页面的需求非常普遍，然而，官方并没有提供内建的嵌套路由解决方案，这导致开发者不得不寻找其他替代方案。在截至uni-simple-router v3版本发布之前，跨端嵌套解决方案相对较难实现。

由于官方未提供直接支持，开发者在嵌套页面的实现上面临一些挑战。不过，uni-simple-router v3版本的推出为开发者带来了更为便捷和灵活的解决方案，使嵌套页面的使用变得更加简单和高效。

通过使用uni-simple-router v3版本，开发者现在可以更方便地实现嵌套页面，无论是在同一端还是跨多端的情况下，都能得到很好的支持。这为uni-app开发带来了更多可能性和创意的空间，使开发过程变得更加顺畅和愉快。

js
// router.js const router = createRouter({  routes:[{  path: '/admin',  component: __dynamicImportComponent__(`@/pages/AdminLayout.vue`,{  pageType:`top`,  }),  children: [  {  path: 'dashboard',  component: __dynamicImportComponent__(`@/pages/DashboardPage.vue`)  },  {  path: 'users',  component: __dynamicImportComponent__(`@/pages/UsersPage.vue`)  },  {  path: 'settings',  component: __dynamicImportComponent__(`@/pages/SettingsPage.vue`)  }  ]  }]; })
html
<!-- AdminLayout.vue --> <template>  <div>  <sidebar></sidebar>  <main>  <simple-router-view></simple-router-view>  </main>  </div> </template>

通过使用嵌套路由，你可以构建出更复杂的页面布局和导航结构，将不同功能模块拆分成独立的路由组件，并嵌套在父级路由中，实现更灵活和可扩展的应用程序架构，详细请查看 嵌套路由。

自定义路径匹配 ​

在uni-simple-router中，当你不再使用pages.json来定义页面时，你可以轻松地自定义path，而不再担心路径无法自定义的问题。

通过使用__dynamicImportComponent__函数来导入组件，并在路由配置中进行自定义path的设置，你完全可以根据自己的需求来定义页面的路径。这种灵活性让你能够更加自由地组织和管理页面结构，而无需受限于pages.json的固定配置。

伪静态格式 ​

  • router.js
js
const router = createRouter({ platform: process.env.VUE_APP_PLATFORM,  routes:[{  path:`/class/:id(\\d+).html`,  component: Home  }] })
  • URL表现
sh
http://localhost:5174/#/class/6.html

静态路径格式 ​

  • router.js
js
const router = createRouter({ platform: process.env.VUE_APP_PLATFORM,  routes:[{  path:`/home`,  component: Home  }] })
  • URL表现
sh
http://localhost:5174/#/home

复杂分类 ​

  • router.js
js
const router = createRouter({ platform: process.env.VUE_APP_PLATFORM,  routes:[{  path:`/product/:category(\\w+)/:subCategory(\\w+)`,  component: Product  }] })
  • URL表现
sh
http://localhost:5174/#/product/electronics/phones

指定字符 ​

  • router.js
js
const router = createRouter({ platform: process.env.VUE_APP_PLATFORM,  routes:[{  path:`/category/:name(\\w+)`,  component: Category  }] })
  • URL表现
sh
http://localhost:5174/#/category/books

如果了解更多你可以查阅 路由匹配