高效实现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

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