拔掉 vue-router 插件

Vue 中基于自动文件的路由，支持 TS

StackBlitz 演示

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

警告

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

安装

npm i -D unplugin-vue-router

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

维特

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

export default defineConfig ( {
  plugins : [
    VueRouter ( {
      /* options */
    } ) ,
    // ️ Vue must be placed after VueRouter()
    Vue ( ) ,
  ] ,
} )

示例： playground/

汇总

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

export default {
  plugins : [
    VueRouter ( {
      /* options */
    } ) ,
    // ️ Vue must be placed after VueRouter()
    Vue ( ) ,
  ] ,
}

网页包

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

Vue CLI

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

esbuild

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

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

设置

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

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

然后，如果您有一个类似于npm vue create 创建的env.d.ts文件，请向其中添加unplugin-vue-router/client类型：

 // env.d.ts
/// 
///

如果您没有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(),
  // pass the generated routes written by the plugin ?
+  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) => {
     // install all modules under `modules/`
     Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
       .forEach(i => i.install?.(ctx))
   },
 )