uni-simple-router

主题

On this page

预加载路由组件 v1.1.6+ ​

Watch a free video lesson on official

在过去的版本中，uni-simple-router 虽然提供了按需加载组件的功能，但随着项目规模的不断扩大，路由组件的体积也随之增加。这种情况导致在页面跳转时，需要花费大量时间下载和加载相关组件，进而影响用户的使用体验。

为了应对这一问题，我们很高兴地宣布，在新版本中引入了预加载组件的功能。该功能能够提前加载需要的组件，从而减少页面跳转时的等待时间。这不仅解决了过去版本中由于按需加载组件而导致的加载延迟问题，还显著提升了整体的用户体验。

陷阱提示

当前功能仅为H5提供，当你运行到其他端时请做好条件编译。

基本使用 ​

要想预加载一个路由组件，我们需要先为这个路由组件设置一个 name，假设我们的路由表为如下结构：

ts
import { __dynamicImportComponent__ } from '@/uni-simple-router'  export const customTabbar=[{ path:`/customTabbar`, name:`customTabbar`, component:__dynamicImportComponent__(`../../examples/tabbar/index.vue`,{ pageType: `top`, }), 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`), }, ] } ]

我们现在需要加载 name 为 customTabbarHomeChild 的路由组件：

ts
import { createRouter, preloadRoutes } from '@/uni-simple-router' // 记得换成自己的路径  const router = createRouter({  // .... 实例化 })  router.isReady().then(()=>{  preloadRoutes(['customTabbarHomeChild']).then(res=>{  console.log(res)  }); })

如上代码，preloadRoutes 函数会在路由准备就绪后预加载指定的路由组件。这样，当用户导航到 customTabbarHomeChild 时，组件已经加载完毕，从而减少了等待时间。这个函数的使用非常简单，你只需要将你所需要预加载的组件 name 传递给该函数即可完成加载。

陷阱提示

preloadRoutes 函数一定要在 router.isReady() 准备完成之后再调用，否者会加载失败。

使用技巧 ​

preloadRoutes 函数允许你一次预加载多个路由组件，当你预加载的 name 值是嵌套子组件时，插件会自动帮你完成子级到顶级组件的组件，而非每个组件 name 都需要填写，例如，当你预加载 customTabbarHomeChild 组件时，插件会自动预加载其父级 customTabbarHome 及顶级 customTabbar 组件。

ts
/**  * 目标：预加载 customTabbarHomeChild  * 实际：会自动加载 customTabbar | customTabbarHome | customTabbarHomeChild  */ preloadRoutes(['customTabbarHomeChild']).then(res=>{  console.log(res) });  // 等效于  preloadRoutes([  'customTabbar',  'customTabbarHome',  'customTabbarHomeChild' ]).then(res=>{  console.log(res) });

preloadRoutes 签名 ​

ts
function preloadRoutes(recordName: string | Array<string>): Promise<Array<{  status: 'fulfilled' | 'rejected';  value: any; }>>