@esmx/router-vue

@esmx/router 的 Vue 集成包 - 一个同时适用于 Vue 2.7+ 和 Vue 3 的通用路由器。

## 🚀 特性 ✨ **通用 Vue 支持** - 同时支持 Vue 2.7+ 和 Vue 3 🎯 **组合式 API 优先** - 为现代 Vue 开发而构建 🔗 **无缝集成** - Vue Router 的替代方案 🚀 **TypeScript 就绪** - 完整的 TypeScript 支持，出色的开发体验 ⚡ **高性能** - 为生产环境优化 🔄 **SSR 兼容** - 支持服务端渲染 ## 📦 安装 ```bash # npm npm install @esmx/router @esmx/router-vue # pnpm pnpm add @esmx/router @esmx/router-vue # yarn yarn add @esmx/router @esmx/router-vue ``` ## 🚀 快速开始 ### Vue 3 ```typescript import { createApp, h } from 'vue'; import { Router, RouterMode } from '@esmx/router'; import { RouterPlugin, useProvideRouter } from '@esmx/router-vue'; import App from './App.vue'; const routes = [ { path: '/', component: () => import('./views/Home.vue') }, { path: '/about', component: () => import('./views/About.vue') } ]; const router = new Router({ routes, mode: RouterMode.history }); const app = createApp({ setup() { useProvideRouter(router); return {}; }, render: () => h(App) }); // 安装插件 app.use(RouterPlugin); app.mount('#app'); ``` ### Vue 2.7+ ```typescript import Vue from 'vue'; import { Router, RouterMode } from '@esmx/router'; import { RouterPlugin, useProvideRouter } from '@esmx/router-vue'; import App from './App.vue'; const routes = [ { path: '/', component: () => import('./views/Home.vue') }, { path: '/about', component: () => import('./views/About.vue') } ]; const router = new Router({ routes, mode: RouterMode.history }); // 安装插件 Vue.use(RouterPlugin); new Vue({ setup() { useProvideRouter(router); }, render: h => h(App) }).$mount('#app'); ``` ## 基础用法 ### 模板用法 ```vue ``` ### 组合式 API ```vue ``` ### 选项式 API ```vue ``` ## 📚 API 参考 ### 组件 #### RouterLink 用于创建导航链接的组件。 **属性:** | 属性 | 类型 | 默认值 | 描述 | |------|------|---------|-------------| | `to` | `string` \| `RouteLocationInput` | - | 目标路由位置 | | `type` | `RouterLinkType` | `'push'` | 导航类型 (`'push'` \| `'replace'` \| `'pushWindow'` \| `'replaceWindow'` \| `'pushLayer'`) | | `exact` | `RouteMatchType` | `'include'` | 激活状态匹配方式 (`'include'` \| `'exact'` \| `'route'`) | | `activeClass` | `string` | - | 激活状态的 CSS 类名 | | `event` | `string` \| `string[]` | `'click'` | 触发导航的事件 | | `tag` | `string` | `'a'` | 要渲染的 HTML 标签 | | `layerOptions` | `RouterLayerOptions` | - | 弹层导航选项 (与 `type="pushLayer"` 一起使用) | **用法:** ```vue ``` #### RouterView 渲染匹配路由组件的组件。 **用法:** ```vue ``` ### 组合式 API #### useRouter() 获取用于导航的路由器实例。 ```typescript function useRouter(): Router ``` **用法:** ```vue ``` #### useRoute() 获取当前路由信息（响应式）。 ```typescript function useRoute(): Route ``` **用法:** ```vue ``` #### useProvideRouter() 为子组件提供路由上下文。 ```typescript function useProvideRouter(router: Router): void ``` **用法:** ```typescript import { Router, RouterMode } from '@esmx/router'; import { useProvideRouter } from '@esmx/router-vue'; const router = new Router({ routes, mode: RouterMode.history }); // 在应用的 setup 函数中 setup() { useProvideRouter(router); } ``` #### useLink() 为自定义导航组件创建响应式链接助手。 ```typescript function useLink(props: RouterLinkProps): ComputedRef ``` **用法:** ```vue ``` ### 选项式 API #### getRouter() 在选项式 API 组件中获取路由器实例。 ```typescript function getRouter(instance: VueInstance): Router ``` #### getRoute() 在选项式 API 组件中获取当前路由。 ```typescript function getRoute(instance: VueInstance): Route ``` ### 插件 #### RouterPlugin 全局注册 RouterLink 和 RouterView 组件的 Vue 插件。 ```typescript const RouterPlugin = { install(app: App): void } ``` **用法:** ```typescript // Vue 3 app.use(RouterPlugin); // Vue 2 Vue.use(RouterPlugin); ``` ## TypeScript 支持此包为 Vue 2.7+ 和 Vue 3 提供完整的 TypeScript 支持。对于选项式 API 用法，包会自动为 Vue 组件实例增强 `$router` 和 `$route` 属性，允许您在模板和组件方法中直接访问它们。 ```typescript // 选项式 API 类型增强（自动） declare module 'vue/types/vue' { interface Vue { readonly $router: Router; readonly $route: Route; } } ``` **选项式 API 用法:** ```vue ``` ## 高级用法 ### 自定义链接组件 ```vue ``` ### 组件中的路由守卫 ```vue ``` ## 从 Vue Router 迁移 ### 主要差异 1. **路由器创建**: 使用 `@esmx/router` 的 `new Router()` 构造函数 2. **上下文提供**: 使用 `useProvideRouter()` 而非路由器安装 3. **组件注册**: 使用 `RouterPlugin` 进行全局组件注册 ### 迁移示例 **之前 (Vue Router):** ```typescript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes }); app.use(router); ``` **之后 (@esmx/router-vue):** ```typescript import { Router, RouterMode } from '@esmx/router'; import { RouterPlugin, useProvideRouter } from '@esmx/router-vue'; import { createApp, h } from 'vue'; import App from './App.vue'; const router = new Router({ routes, mode: RouterMode.history }); const app = createApp({ setup() { useProvideRouter(router); return {}; }, render: () => h(App) }); app.use(RouterPlugin); ``` ## 浏览器支持 - **现代浏览器**：支持 ES 模块 (`import`/`export`) 和动态导入 (`import()`) 的浏览器 ## 贡献我们欢迎贡献！请随时提交 issues 和 pull requests。 ## 📄 许可证 MIT © [Esmx 团队](https://github.com/esmnext/esmx) ## 相关包 - [@esmx/router](https://github.com/esmnext/esmx/tree/master/packages/router) - 核心路由包 - [@esmx/core](https://github.com/esmnext/esmx/tree/master/packages/core) - Esmx 核心框架

@esmx/router-vue

{{ route.meta?.title || '页面' }}