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>