@composy/router-vanilla

面向 Vanilla JS 与 @composy/engine-vanilla 的路由适配层，负责把 @composy/router-core 的能力接到 DOM Outlet、视图注册表和引擎服务容器中。

包定位

• 核心层不放这里：路径匹配、守卫、中间件、history、缓存等框架无关能力仍来自 @composy/router-core。
• 本包负责：
  • createVanillaRouterPlugin()
  • OutletManager
  • ViewRegistry
  • helper 访问器
  • composables 风格的快捷 API

安装

pnpm add @composy/router-vanilla @composy/router-core @composy/engine-vanilla

快速开始

import { createVanillaEngine } from '@composy/engine-vanilla'
import { createVanillaRouterPlugin, getRouter } from '@composy/router-vanilla'
import '@composy/router-vanilla/styles/transitions.css'

const engine = createVanillaEngine({
  plugins: [
    createVanillaRouterPlugin({
      mode: 'hash',
      outlet: '#router-outlet',
      routes: [
        { path: '/', component: HomeView },
        {
          path: '/settings',
          component: SettingsLayoutView,
          children: [
            { path: 'profile', component: SettingsProfileView },
            { path: 'security', component: SettingsSecurityView },
          ],
        },
      ],
    }),
  ],
})

await engine.mount('#app')

const router = getRouter(engine)
await router.push({ path: '/about' })

主要能力

createVanillaRouterPlugin()

• 创建适用于 @composy/engine-vanilla 的路由插件。
• 自动创建 history、router、view registry 与 outlet manager。
• 默认启用与 @composy/router-vue/styles/transitions.css 同名的 route-transition-* 切换动画；需要样式时引入 @composy/router-vanilla/styles/transitions.css。
• 安装后会在容器中注册：
  • router
  • routerOutlet
  • viewRegistry

ViewRegistry

• 管理路由与视图组件的映射关系。
• 负责嵌套路由视图树的注册与查询；父视图内放置 <div data-router-outlet></div> 后即可渲染子路由。

OutletManager

• 管理 DOM outlet 的注册和渲染。
• 支持根级过渡动画和子路由过渡动画，动画 class 协议与 Vue 适配层保持一致。
• 负责在导航结束后把目标视图渲染到对应 outlet。

Helpers

• getRouter(engine)
• getOutlet(engine)
• getViewRegistry(engine)

Composables 风格 API

• useRouter()
• useRoute()
• navigate()
• useHead()
• createAuthGuard()

公开导出

插件

• createVanillaRouterPlugin
• VanillaRouterConfig

视图与 Outlet

• ViewRegistry
• OutletManager
• RouteMeta
• OutletOptions

Helpers 与 Composables

• getRouter
• getOutlet
• getViewRegistry
• useRouter
• useRoute
• navigate
• useHead
• createAuthGuard

依赖关系

• 运行时必需：@composy/router-core
• 运行时可选但推荐：@composy/engine-vanilla
• 如果不通过 engine 使用，就不需要依赖本包的插件与 helper 层。

构建与校验

在 packages/router/packages/vanilla 目录下：

pnpm build
pnpm type-check
pnpm test

License

MIT © LDesign Team