高效实现uni-app页面路由模块化及路径个性化

在传统的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": "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

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

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

创建页面组件分包

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

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

// 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 字段一样：

{  
  "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开发带来了更多可能性和创意的空间，使开发过程变得更加顺畅和愉快。

// 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`)  
      }  
    ]  
  }];  
})

<!-- 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

  const router = createRouter({  
  platform: process.env.VUE_APP_PLATFORM,  
  routes:[{  
      path:`/class/:id(\\d+).html`,  
      component: Home  
  }]  
  })

• URL表现

  http://localhost:5174/#/class/6.html

静态路径格式

• router.js

  const router = createRouter({  
  platform: process.env.VUE_APP_PLATFORM,  
  routes:[{  
      path:`/home`,  
      component: Home  
  }]  
  })

• URL表现

  http://localhost:5174/#/home

复杂分类

• router.js

  const router = createRouter({  
  platform: process.env.VUE_APP_PLATFORM,  
  routes:[{  
      path:`/product/:category(\\w+)/:subCategory(\\w+)`,  
      component: Product  
  }]  
  })

• URL表现

  http://localhost:5174/#/product/electronics/phones

指定字符

• router.js

  const router = createRouter({  
  platform: process.env.VUE_APP_PLATFORM,  
  routes:[{  
      path:`/category/:name(\\w+)`,  
      component: Category  
  }]  
  })

• URL表现

  http://localhost:5174/#/category/books

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