feat: 添加 Vue Router 插件系统支持

- 实现了 RouterPlugin 和 RouterPluginContext 接口
- 添加了 createRouter 函数，支持插件安装
- 实现了插件安装、卸载机制
- 添加了相关单元测试

Author: l246804

package.json

@@ -14,7 +14,7 @@
   "bugs": {
     "url": "https://github.com/vue-spark/vue-router-plugin-system/issues"
   },
-  "keywords": [],
+  "keywords": ["vue", "vue-router", "plugin"],
   "exports": {
     ".": "./dist/index.js",
     "./package.json": "./package.json"
@@ -40,6 +40,10 @@
     "release": "bumpp && pnpm publish",
     "prepublishOnly": "pnpm run build"
   },
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "^4.16.2",
     "@sxzz/prettier-config": "^2.2.3",
@@ -56,7 +60,9 @@
     "tsdown": "^0.12.9",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"

pnpm-lock.yaml

@@ -1,3 +1,84 @@
-export function myFunction(): string {
-  return 'Hello, world!'
+import type { App } from 'vue'
+import type { RouterOptions as _RouterOptions, Router } from 'vue-router'
+import type { RouterPlugin, RouterPluginContext } from './plugin'
+import { effectScope } from 'vue'
+import { createRouter as _createRouter } from 'vue-router'
+import { APP_KEY } from './meta-keys'
+
+export interface RouterOptions extends _RouterOptions {
+  /**
+   * Plugins to be installed on the router.
+   */
+  plugins?: RouterPlugin[]
+}
+
+/**
+ * Equivalent to {@link createRouter} from `vue-router`, but with support for plugins.
+ * @param options {@link RouterOptions}
+ *
+ * @example
+ * ```ts
+ * createRouter({
+ *   history: createWebHistory(),
+ *   routes: [],
+ *   plugins: [SomePlugin()],
+ * })
+ * ```
+ */
+export function createRouter(options: RouterOptions): Router {
+  const router = _createRouter(options)
+  const { plugins = [] } = options
+
+  const effect = effectScope(true)
+  const runWithAppFns: ((app: App) => void)[] = []
+  const uninstallFns: (() => void)[] = []
+
+  const ctx: RouterPluginContext = {
+    router,
+
+    runWithApp(fn) {
+      // 将 fn 包装到 effect 中
+      const rawFn = fn
+      fn = function (this: any, ...args) {
+        return effect.run(() => rawFn.apply(this, args))
+      }
+
+      if (router[APP_KEY]) {
+        fn(router[APP_KEY])
+      } else {
+        runWithAppFns.push(fn)
+      }
+    },
+
+    onUninstall(fn) {
+      uninstallFns.push(fn)
+    },
+  }
+
+  // 在 effect 中执行插件
+  effect.run(() => {
+    plugins.forEach((plugin) => plugin(ctx))
+  })
+
+  // 重写 install 方法
+  const originalInstall = router.install
+  router.install = (app: App) => {
+    originalInstall(app)
+
+    router[APP_KEY] = app
+    runWithAppFns.forEach((fn) => fn(app))
+    runWithAppFns.length = 0
+
+    // TODO: use https://github.com/vuejs/core/pull/8801 if merged
+    const { unmount } = app
+    app.unmount = () => {
+      effect.stop()
+      delete router[APP_KEY]
+      uninstallFns.forEach((fn) => fn())
+      uninstallFns.length = 0
+      unmount.call(app)
+    }
+  }
+
+  return router
 }

src/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue'
+
+export const APP_KEY = Symbol('vue app')
+
+declare module 'vue-router' {
+  export interface Router {
+    /**
+     * The vue app instance.
+     */
+    [APP_KEY]?: App
+  }
+}