débrancher-vue-routeur

Routage automatique basé sur des fichiers dans Vue avec prise en charge TS

Démo StackBlitz

Ce plugin au moment de la construction simplifie votre configuration de routage et la rend plus sûre et plus facile à utiliser grâce à TypeScript. Nécessite Vue Router >=4.4.0.

Avertissement

Bien que le routage typé unplugin-vue-router et le routage basé sur des fichiers soient fondamentalement stables, ils contiennent d'autres API expérimentales susceptibles de changer (par exemple, les chargeurs de données). Assurez-vous de consulter la documentation pertinente pour connaître les dernières informations. Si vous rencontrez un problème, un défaut de conception ou si vous avez des idées pour l'améliorer, veuillez ouvrir un problème ou une discussion.

Installer

npm i -D unplugin-vue-router

Ajoutez le plugin VueRouter avant le plugin Vue :

Vite

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

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

Exemple : playground/

Cumul

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

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

Pack Web

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

esconstruire

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

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

Installation

Après l'installation, vous devez exécuter votre serveur de développement (généralement npm run dev ) pour générer la première version des types . Ensuite, vous devez ajouter les types à votre tsconfig.json .

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

Ensuite, si vous avez un fichier env.d.ts comme celui créé par npm vue create , ajoutez-y les types unplugin-vue-router/client :

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

Si vous n'avez pas de fichier env.d.ts , vous pouvez en créer un et y ajouter les types unplugin-vue-router ou vous pouvez les ajouter à la propriété types dans votre tsconfig.json :

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

Enfin, importez les routes générées depuis vue-router/auto-routes et transmettez-les au routeur :

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

Alternativement, vous pouvez également importer le tableau routes et créer le routeur manuellement ou le transmettre à un plugin. Voici un exemple avec le démarreur 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))
   },
 )