@composy/router-vue

@composy/router-vue

面向 Vue 3 的路由适配层。基于 vue-router，并复用 @composy/router-core 的路径工具、类型和部分核心能力。

包定位

• 核心能力来源：@composy/router-core
• Vue 运行时来源：vue + vue-router
• 本包负责：
  • createRouter() / useRouter() / useRoute()
  • 路由组件
  • composables
  • 配置注入
  • devtools 辅助
  • 可选的 LDesign engine plugin

安装

pnpm add @composy/router-vue vue vue-router

如果你还要接入 LDesign Engine：

pnpm add @composy/engine-core

快速开始

import { createRouter, createWebHistory } from '@composy/router-vue'
import { createApp } from 'vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ],
})

const app = createApp(App)
app.use(router)
app.mount('#app')

主要能力

Router API

• createRouter()
• useRouter()
• useRoute()
• createWebHistory()
• createWebHashHistory()
• createMemoryHistory()

组件

• RouterView
• RouterLink
• RouterTabs
• RouterBreadcrumb
• RouterModal
• RouterSkeleton
• RouterGuard

Composables

• 基础：useParams()、useQuery()、useHash()、useMeta()
• 匹配与路径：useRouteMatch()、useFullPath()、useRouteName()
• 类型增强：useTypedParams()、useTypedQuery()、useTypedMeta()
• 导航守卫：onBeforeRouteLeave()、onBeforeRouteUpdate()
• 增强能力：useNavigationState()、useBreadcrumb()、useRouteTitle()、useRouteWatcher()、useRouteScroll()、useRouteDebounce()

配置与插件

• provideRouterConfig()
• injectRouterConfig()
• installRouterConfig()
• createRouterPlugin()
• createRouterEnginePlugin()
• createDefaultRouterEnginePlugin()

适配与开发辅助

• vueAdapter
• VueComponentLoader
• VueViewRenderer
• VueSSRRenderer
• VueErrorBoundary
• setupDevtools()

依赖边界

• 运行时必需：@composy/router-core、vue-router
• peer 依赖：vue、vue-router
• 可选扩展依赖：@composy/engine-core，仅在使用 engine plugin 时需要

构建与校验

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

pnpm build
pnpm type-check
pnpm test
node --experimental-strip-types ../../../../scripts/index.ts workspace:check-package-outputs --cwd ../../ --target vue

build 统一使用 @composy/builder 的 Rolldown 引擎，并在构建后归一化发布产物。发布目录包括 dist（浏览器/UMD 与压缩入口）、es 和 esm（ESM 与声明文件）、lib（CJS 与声明文件）；最后一条命令会验证所有公开入口是否与 package.json 声明一致。

构建配置、ESLint 配置和 TypeScript 项目配置统一维护在 .ldesign/；包根 eslint.config.js 与 tsconfig*.json 是供工具兼容使用的入口。

相关文档

• ../core/README.md
• ../vanilla/README.md

License

MIT © LDesign Team