uni-simple-router

主题

On this page

嵌套路由 ​

Watch a free video lesson on official

在 uni-simple-router 中，你可以使用嵌套路由来创建复杂的页面布局和导航结构。嵌套路由允许你在一个路由组件中嵌套其他子路由组件，并且可以在子路由组件中定义自己的子路由。

要创建嵌套路由，你需要在路由表中使用 children 字段来定义子路由。每个子路由都是一个对象，可以包含 path、component、props 等字段，类似于顶级路由的定义。

下面是一个示例，展示了如何使用嵌套路由创建一个后台管理系统的布局：

js
import {
    __dynamicImportComponent__
} from '@/uni-simple-router'

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

陷阱提示

  • 以 / 开头的路径被视为根路径或顶级页面。这意味着这些路径是相对于应用程序的根路径进行匹配的，而不是相对于父级路由进行匹配的。
  • 对于根路径或顶级页面，你需要在路由表中使用以 / 开头的完整路径来定义。
  • 而对于子路由，你无需在路径中使用 / 开头，它们将自动与父级路由的路径进行拼接。

在上述示例中，我们定义了一个顶级路由 /admin，它使用 AdminLayout 组件作为布局容器。在 AdminLayout 组件中，我们可以通过 <simple-router-view> 组件来显示子路由组件。

然后，我们定义了三个子路由：/admin/dashboard、/admin/users 和 /admin/settings，它们分别对应不同的功能页面。

在 AdminLayout 组件的模板中，可以使用 <simple-router-view> 组件来显示当前活动的子路由组件：

html
<!-- AdminLayout.vue -->
<template>
  <div>
    <sidebar></sidebar>
    <main>
      <simple-router-view></simple-router-view>
    </main>
  </div>
</template>

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

平台兼容性 ​

  • APP

    • 平台是否支持：✅
    • 分包组件引入：✅

  • H5

    • 平台是否支持：✅
    • 分包组件引入：✅

  • 微信小程序

    • 平台是否支持：✅
    • 分包组件引入：✅
    • 支持最低版本库： v2.11.2
    • 开发工具版本： v1.06.2210310

  • 支付宝小程序

    • 平台是否支持：✅
    • 分包组件引入：✅
    • 支持最低版本库： v2.7.0
    • 开发工具版本： v3.6.4

  • 京东小程序

    • 平台是否支持：✅
    • 分包组件引入：✅
    • 开发工具版本： v1.7.3

  • QQ小程序

    • 平台是否支持：✅
    • 分包组件引入：❌
    • 支持最低版本库： v1.1.7
    • 开发工具版本： v0.70.2209190_x64

  • 快手小程序

    • 平台是否支持：✅
    • 分包组件引入：❌
    • 支持最低版本库： v1.57.2
    • 开发工具版本： v1.29.0

  • 抖音小程序

    • 平台是否支持：❌
    • 支持最低版本库： v2.65.1.0
    • 开发工具版本： v4.0.8
    • 不可用原因：官方BUG，导致无法使用，等待修复#4386

  • 飞书小程序

    • 平台是否支持：❌
    • 支持最低版本库： v1.9.87.3
    • 开发工具版本： v2.32.6.0
    • 不可用原因：官方BUG，导致无法使用，等待修复#4386

  • 百度小程序

    • 平台是否支持：❌
    • 开发工具版本： v4.19.1
    • 不可用原因：玄学

在分包中使用 ​

分包机制主要在小程序中发挥作用，每个小程序的分包机制可能有所不同。在使用嵌套路由并引入分包中的组件时，uni-simple-router已经为你处理了相关逻辑。然而，由于不同小程序版本的支持度可能存在差异，建议在使用之前查阅目标小程序的最低支持版本要求和兼容性。

例如，假设你的路由配置如下：

js
const routes = [
	{
		path:`/customTabbar`,
		name:`customTabbar`,
		component:__dynamicImportComponent__(`~@/examples/tabbar/index.vue`,{
			pageType: `top`,
			package: {  
				type: `child`,  //启用分包  
				name: `examples/tabbar` 
			},  
		}),
		children:[
			{
				path:`home`,
				name:`customTabbarHome`,
				component:__dynamicImportComponent__(`~@/examples/tabbar/children/home.vue`),
				children:[
					{
						path:`child/:id(\\d{3})`,
						name:`customTabbarHomeChild`,
						component:__dynamicImportComponent__(`~@/examples/tabbar/children/children/commonChild.vue`)
					}
				]
			},
			{
				path:`class`,
				name:`customTabbarClass`,
				component:__dynamicImportComponent__(`~@/examples/tabbar/children/class.vue`),
			},
			{
				path:`release`,
				name:`customTabbarRelease`,
				component:__dynamicImportComponent__(`~@/examples/tabbar/children/release.vue`),
			},
			{
				path:`news`,
				name:`customTabbarNews`,
				component:__dynamicImportComponent__(`~@/examples/tabbar/children/news.vue`),
			},
			{
				path:`me`,
				name:`customTabbarMe`,
				component:__dynamicImportComponent__(`~@/examples/tabbar/children/me.vue`),
			},
		]
	}
]

如果你对分包组件配置还不熟悉，请查阅这里。需要注意的是，嵌套路由需要与 <simple-router-view/> 组件配合使用，才能将视图渲染到指定位置。目前 <simple-router-view/> 组件是全局注入的，所以在嵌套路由中如果配置了分包中的组件，请确保目标平台是否支持该功能。这个限制主要适用于小程序端，非小程序端不受影响。在未来我们将对小程序端优化 <simple-router-view/> 的注入时期，使得它能支持所有平台的分包组件互相引用。

嵌套路由的生命周期 ​

在使用嵌套路由时，需要注意子路由的生命周期与根组件（顶级页面）的生命周期略有不同。子路由无法使用 uni-app 的所有 页面生命周期，即使能够使用也不建议使用，因为这超出了 uni-simple-router 的标准和可控范围，可能导致一些无法预料的情况发生。子路由只支持使用 组件生命周期 和 Vue 3 的所有生命周期。因此，在编写子路由组件时，应该只使用适合组件的生命周期钩子函数，以确保正常运行和可维护性。

例如，假设你的路由配置如下：

js
import {
    __dynamicImportComponent__
} from '@/uni-simple-router'

const routes = [
  {
    path: '/admin',
    component: __dynamicImportComponent__(`@/pages/AdminLayout.vue`,{
      pageType:`top`,
    }),
    children: [
      {
        path: 'dashboard',
        component: __dynamicImportComponent__(`@/pages/DashboardPage.vue`)
      },
    ]
  }
];

根组件（顶级页面）使用 uni-app 的 页面生命周期

js
// AdminLayout.vue
<script setup lang="ts">
import { onLoad} from '@dcloudio/uni-app'

onLoad(()=>{
  console.log(`AdminLayout - onLoad `)
})
</script>

嵌套子路由使用 使用 uni-app 的 组件生命周期 和 Vue 3 的所有生命周期

js
// DashboardPage.vue
<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(()=>{
  console.log(`DashboardPage - onMounted `)
})
</script>

温馨提示

  • 不管是根组件（顶级页面）还是子组件，uni-simple-router 都遵循 uni-app 和 Vue 的标准，你可以放心地使用 组合 API 或 选项 API 来定义和使用组件的生命周期钩子函数。

搭配嵌套命名视图 ​

在 uni-simple-router 中，你可以通过嵌套路由和嵌套命名视图来创建复杂的页面布局和视图结构。嵌套路由允许你在父路由下定义子路由，而嵌套命名视图则允许你将多个视图同时渲染到不同的位置。如需了解更详细的信息，请参阅 嵌套命名视图