uni-simple-router

主题

On this page

路由组件 ​

Watch a free video lesson on official

在 uni-simple-router 中，路由组件是指被映射到路由表中的组件，它们会被渲染到对应的路由路径中。uni-simple-router 提供了专属 __dynamicImportComponent__ 辅助函数来导入组件，它使得你在定义和配置路由组件时，变得简单且清晰。

__dynamicImportComponent__ 函数 ​

该函数会在编译时运行，根据你指定的参数将对应组件编译成适合当前平台的导入方式。它的作用是方便你在项目的任意位置导入组件，并确保它们能够在特定平台上正确运行。

我们来看个例子：

编译前源码 ​

js
import {  __dynamicImportComponent__ } from '@/uni-simple-router'  const IndexCom = __dynamicImportComponent__(`@/pages/index.vue`)

编译后源码 ​

H5端的表现

js
import {  __dynamicImportComponent__ } from '@/uni-simple-router'  const component_P8dJH67nkT = ()=>import("@/pages/index.vue"); const IndexCom = component_P8dJH67nkT

非H5端表现

js
import component_hiM9fGDTMz from '@/pages/index.vue' import {  __dynamicImportComponent__ } from '@/uni-simple-router'  const IndexCom = component_P8dJH67nkT

该函数在编译时还会执行其他操作，并生成其他相关的配置数据。为了简洁起见，我只展示了你可能关注的代码部分。总的来说，该函数的目的是将组件编译成适用于特定平台的导入方式。它会根据不同的平台要求进行适配和处理，确保组件在各个平台上能够正常导入和使用。除了导入方式的处理，该函数还可能包括其他编译相关的任务，以确保组件在特定平台下的最佳性能和兼容性。

先决条件

  • 二次赋值后的 __dynamicImportComponent__ 函数导入组件无效
  • __dynamicImportComponent 函数传递的参数必须是静态字符串，目前不支持动态字符串或者变量
  • 只有使用 __dynamicImportComponent__ 函数导入的组件才能在路由表中注册并起效。这个函数会在编译时进行处理，确保组件按需加载和正确导入。如果你直接使用普通的组件导入方式，组件将无法被正确注册到路由表中，导致无法实现期望的效果。因此，请确保在路由表中使用 __dynamicImportComponent__ 函数来导入组件，以确保路由功能的正常运作。

❌ 错误的 ​

js
import {  __dynamicImportComponent__ } from '@/uni-simple-router'  // 不要二次赋值后使用 const __myHelper__ = __dynamicImportComponent__  const IndexCom = __myHelper__(`@/pages/index.vue`)

✅ 正确的 ​

js
import {  __dynamicImportComponent__ } from '@/uni-simple-router'  const IndexCom = __dynamicImportComponent__(`@/pages/index.vue`,{  pageType:`top` })   const router = createRouter({  routes:[{  path:`/`,  component:IndexCom,  }] })
js
import {  __dynamicImportComponent__ } from '@/uni-simple-router'  const router = createRouter({  routes:[{  path:`/`,  component:__dynamicImportComponent__(`@/pages/index.vue`,{  pageType:`top`  }),  }] })

将导入的组件分包 ​

为了减少主包的大小，编译器支持将根组件（顶级页面）注册到分包中。你只需在编译函数中传递以下配置即可：

陷阱提示

  • 分包仅支持根组件（顶级页面），即路径以 / 开头且具有 pageType:'top' 属性的组件。
  • 你无需在 pages.json 文件中配置 subPackages，因为 uni-simple-router 已经完全接管了路由管理，你只需要在 __dynamicImportComponent__ 函数中配置即可。
js
import {  __dynamicImportComponent__ } from '@/uni-simple-router'  const router = createRouter({  routes:[{  path:`/`,  component:__dynamicImportComponent__(`@/pagesA/tabbar/index.vue`,{  pageType:`top`,   package: {   type: `child`,   name: `pagesA/tabbar`   },   }),  },{  path:`/pagesB`,  component:__dynamicImportComponent__(`@/pagesB/tabbar/index.vue`,{  pageType:`top`,   package: {   type: `child`,   },   }),  }] })

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

json
{  "subPackages": [  {  "root": "pagesA/tabbar",  "pages": [{  "path": "index",  }]  },   {  "root": "pagesB",  "pages": [{  "path": "tabbar/index",  }]  }  ], }

在 __dynamicImportComponent__ 函数中，你可以通过 package 字段传递 type 和 name 参数。如果未指定 type，默认会将组件编译到主包中。当设置了 type: 'child' 时，组件会被编译到子包中。在编译为子包时，name 字段将起到作用。如果未设置 name，系统将使用组件引入时的一级目录作为子包的 root 值。

独立的 component ​

在注册路由时，你可以选择单独传递一个 component 参数。如果只传递了 component ，插件将会将该组件作为 default 的挂载点。如果你传递了 components 参数，并且该组件是顶级页面，你必须为它创建一个 default 的挂载点。对于子路由对应的组件，没有强制要求传递 default 参数。因此，在非必要的情况下，我们强烈建议你使用 component 参数来注册组件，而不是 components 。这样可以简化路由配置，并提高代码的可读性和维护性。

像这样：

✅ 正确的 ​

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

✅ 正确的 ​

js
// router.js const router = createRouter({  routes:[{  path:`/`,  components:{  default:__dynamicImportComponent__(`@/pages/index.vue`,{  pageType:`top`,  })  },  }] })

❌ 错误的 ​

js
// router.js const router = createRouter({  routes:[{  path:`/`,   components:{   aaa:__dynamicImportComponent__(`@/pages/index.vue`,{   pageType:`top`,   })   },   }] })

多视图 components ​

components 参数通常用于子路由中。有时候，我们希望同时(同级)展示多个视图，而不是嵌套展示，这时候 components 就发挥了重要作用。你需要配合 <simple-router-view/> 来实现这个功能。使用 components 参数可以灵活地配置多个组件，并在相应的位置同时展示它们。通过与 <simple-router-view/> 配合使用，你可以轻松实现复杂的页面布局和视图组合。如果你希望了解更多，请点击这里。

js
// router.js const router = createRouter({  routes:[{  path:`/view`,  component:__dynamicImportComponent__(`@/pages/view.vue`,{  pageType:`top`  }),  children:[{  path:`ls`,  components:{  default:__dynamicImportComponent__(`@/components/view/home.vue`),  LeftSidebar:__dynamicImportComponent__(`@/components/view/LeftSidebar.vue`),  RightSidebar:__dynamicImportComponent__(`@/components/view/RightSidebar.vue`)  }  }]  }] })
vue
// pages/view.vue <template>  <view class="content">  <simple-router-view class="view left-sidebar" name="LeftSidebar"/>  <simple-router-view class="view main-content"/>  <simple-router-view class="view right-sidebar" name="RightSidebar"/>  </view> </template>  <script setup lang="ts">  </script>