vue-router-inspector-panel

Vue 3 + vue-router 4 的本地路由检查面板。它从完整的 Router 实例读取当前全部路由，因此通过 router.addRoute() 注入的接口异步路由也会包含在结果中。

同时提供一个 Vite 插件，用于扫描消费项目中的 .vue 文件，支持按文件名或目录搜索。

安装

npm install -D vue-router-inspector-panel

配置 Vite

// vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import { vueRouterInspectorVitePlugin } from "vue-router-inspector-panel/vite";

export default defineConfig({
  plugins: [vue(), vueRouterInspectorVitePlugin()]
});

Vite 插件仅在开发服务器中运行，默认扫描 <projectRoot>/src/**/*.vue。可以指定多个目录：

vueRouterInspectorVitePlugin({ directories: ["src", "modules"] });

安装运行时插件

应在异步路由已经注入、router 包含完整路由后安装：

import "vue-router-inspector-panel/style.css";

await initAsyncRoutes(router);

if (import.meta.env.DEV) {
  const { VueRouterInspectorPlugin } =
    await import("vue-router-inspector-panel");
  app.use(VueRouterInspectorPlugin, { router });
}

安装后页面右下角会出现“路由”入口。

不使用 Vite 扫描插件

也可以由消费项目直接提供 Vue 文件路径：

const vueFiles = Object.keys(import.meta.glob("/src/**/*.vue"));

app.use(VueRouterInspectorPlugin, {
  router,
  vueFiles
});

组件路径解析

默认按以下顺序解析路由组件路径：

1. 已加载 Vue 组件的 __file。
2. 懒加载组件函数中的 .vue 或 .tsx import 路径。
3. 无法解析时显示 —。

特殊路由加载器可以提供自定义解析函数：

app.use(VueRouterInspectorPlugin, {
  router,
  componentPathResolver(route, component) {
    return route.meta.componentPath as string | undefined;
  }
});

默认使用 route.meta.backstage 标记动态路由。其他项目可以通过 dynamicRouteMetaKey 修改：

app.use(VueRouterInspectorPlugin, {
  router,
  dynamicRouteMetaKey: "dynamic"
});

路由与 Vue 文件关联

检查器会使用规范化后的完整组件路径进行精确匹配，避免不同目录下的同名 index.vue 被错误关联：

• 路由列表显示对应 Vue 文件的“已匹配”“未扫描”或“无组件”状态。
• Vue 文件列表显示引用该文件的全部路由，同一组件可对应多个路由。
• Vue 文件搜索支持输入文件路径、路由路径、路由名称或标题进行反向查询。

手动挂载

import {
  mountRouterInspector,
  type RouterInspectorController
} from "vue-router-inspector-panel";

const controller: RouterInspectorController = mountRouterInspector({ router });
controller.unmount();

构建与发布检查

npm run typecheck
npm run build
npm test
npm run pack:check