unplugin-vue-router

Vue 中支持 TS 的自动文件路由 ✨

StackBlitz 演示

这个构建时插件简化了路由设置，并且由于使用 TypeScript，使其更安全、更易于使用。需要 Vue Router >=4.4.0。

[!警告] 虽然 unplugin-vue-router 的类型化路由和基于文件的路由基本稳定，但它包含其他可能会发生变化的实验性 API（例如数据加载器）。请务必查看相关文档以获取最新信息。如果您发现任何问题、设计缺陷或有改进想法，请开启一个issue或讨论。

安装

npm i -D unplugin-vue-router

在 Vue 插件之前添加 VueRouter 插件：

// vite.config.ts
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /* 选项 */
    }),
    // ⚠️ Vue 必须放在 VueRouter() 之后
    Vue(),
  ],
})

示例：playground/

</details>

<details> <summary>Rollup</summary>

// rollup.config.js
import VueRouter from 'unplugin-vue-router/rollup'

export default {
  plugins: [
    VueRouter({
      /* 选项 */
    }),
    // ⚠️ Vue 必须放在 VueRouter() 之后
    Vue(),
  ],
}

</details>

<details> <summary>Webpack</summary>

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-router/webpack')({
      /* 选项 */
    }),
  ],
}

</details>

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-router/webpack')({
        /* 选项 */
      }),
    ],
  },
}

</details>

<details> <summary>esbuild</summary>

// esbuild.config.js
import { build } from 'esbuild'
import VueRouter from 'unplugin-vue-router/esbuild'

build({
  plugins: [VueRouter()],
})

</details>

设置

安装后，您应该运行开发服务器（通常是 npm run dev）以生成类型的第一个版本。然后，您需要将类型添加到 tsconfig.json 中。

{
  "include": [
    // ...
    "./typed-router.d.ts"
  ],
  // ...
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler"
    // ...
  }
}

然后，如果您有一个像 npm vue create <my-project> 创建的 env.d.ts 文件，请将 unplugin-vue-router/client 类型添加到其中：

// env.d.ts
/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

如果您没有 env.d.ts 文件，可以创建一个并添加 unplugin-vue-router 类型，或者将它们添加到 tsconfig.json 的 types 属性中：

{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-router/client"]
  }
}

最后，从 vue-router/auto-routes 导入生成的路由，并将它们传递给路由器：

import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'

createRouter({
  history: createWebHistory(),
  // 传递插件生成的路由 🤖
+  routes,
})

或者，您也可以导入 routes 数组并手动创建路由器或将其传递给某些插件。这里是一个使用 Vitesse 起始模板的示例：

 import { ViteSSG } from 'vite-ssg'
 import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
 import type { UserModule } from './types'
-import generatedRoutes from '~pages'
+import { routes } from 'vue-router/auto-routes'

 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
 import 'uno.css'

-const routes = setupLayouts(generatedRoutes)

 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,
   {
-   routes,
+   routes: setupLayouts(routes),
    base: import.meta.env.BASE_URL
  },
   (ctx) => {
     // 安装 `modules/` 下的所有模块
     Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
       .forEach(i => i.install?.(ctx))
   },
 )