cabut-vue-router

Perutean berbasis file otomatis di Vue dengan dukungan TS

Demo StackBlitz

Plugin waktu build ini menyederhanakan pengaturan perutean Anda dan membuatnya lebih aman dan mudah digunakan berkat TypeScript. Memerlukan Vue Router >=4.4.0.

Peringatan

Meskipun perutean tipe unplugin-vue-router dan perutean berbasis file pada dasarnya stabil, perutean ini berisi API eksperimental lain yang dapat berubah (misalnya Pemuat Data). Pastikan untuk memeriksa Dokumentasi yang relevan untuk informasi terbaru. Jika Anda menemukan masalah, cacat desain, atau mempunyai ide untuk memperbaikinya, silakan buka masalah atau Diskusi.

Memasang

npm i -D unplugin-vue-router

Tambahkan plugin VueRouter sebelum plugin Vue:

Vit

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

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

Contoh: playground/

Gulung

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

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

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

esbuild

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

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

Pengaturan

Setelah menginstal, Anda harus menjalankan server dev Anda (biasanya npm run dev ) untuk menghasilkan versi pertama dari tipe tersebut . Maka Anda perlu menambahkan tipe ke tsconfig.json Anda.

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

Kemudian, jika Anda memiliki file env.d.ts seperti yang dibuat oleh npm vue create , tambahkan tipe unplugin-vue-router/client ke dalamnya:

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

Jika Anda tidak memiliki file env.d.ts , Anda dapat membuatnya dan menambahkan tipe unplugin-vue-router ke dalamnya atau Anda dapat menambahkannya ke properti types di tsconfig.json :

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

Terakhir, impor rute yang dihasilkan dari vue-router/auto-routes dan teruskan ke 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,
})

Alternatifnya, Anda juga dapat mengimpor array routes dan membuat router secara manual atau meneruskannya ke beberapa plugin. Berikut ini contoh starter 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))
   },
 )