unplugin-vue-router

Automatisches dateibasiertes Routing in Vue mit TS-Unterstützung

StackBlitz-Demo

Dieses Build-Time-Plugin vereinfacht Ihr Routing-Setup und macht es dank TypeScript sicherer und benutzerfreundlicher. Erfordert Vue Router >=4.4.0.

Warnung

Während das unplugin-vue-router-Typ-Routing und das dateibasierte Routing grundsätzlich stabil sind, enthält es andere experimentelle APIs, die Änderungen unterliegen (z. B. Data Loader). Überprüfen Sie unbedingt die entsprechende Dokumentation auf die neuesten Informationen. Wenn Sie ein Problem oder einen Designfehler finden oder Verbesserungsvorschläge haben, öffnen Sie bitte ein Problem oder eine Diskussion.

Installieren

npm i -D unplugin-vue-router

Fügen Sie das VueRouter-Plugin vor dem Vue-Plugin hinzu:

Vite

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

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

Beispiel: playground/

Rollup

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

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

Webpack

 // 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 ( ) ] ,
} )

Aufstellen

Nach der Installation sollten Sie Ihren Entwicklungsserver ausführen (normalerweise npm run dev ), um die erste Version der Typen zu generieren . Dann müssen Sie die Typen zu Ihrer tsconfig.json hinzufügen.

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

Wenn Sie dann eine env.d.ts -Datei wie die von npm vue create erstellte Datei haben, fügen Sie ihr die Typen unplugin-vue-router/client hinzu:

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

Wenn Sie keine env.d.ts Datei haben, können Sie eine erstellen und ihr die unplugin-vue-router-Typen hinzufügen oder sie zur types Eigenschaft in Ihrer tsconfig.json hinzufügen:

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

Importieren Sie abschließend die generierten Routen aus vue-router/auto-routes und übergeben Sie sie an den Router:

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,
})

Alternativ können Sie auch das routes Array importieren und den Router manuell erstellen oder an ein Plugin übergeben. Hier ein Beispiel mit Vitesse-Starter:

 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))
   },
 )