unplugin vue router

ถอดปลั๊กอิน-vue-เราเตอร์

การกำหนดเส้นทางตามไฟล์อัตโนมัติใน Vue พร้อมรองรับ TS

• การสาธิต StackBlitz

ปลั๊กอินเวลาสร้างนี้ทำให้การตั้งค่าการกำหนดเส้นทางของคุณง่ายขึ้น และ ทำให้ปลอดภัยและใช้งานง่ายขึ้นด้วย TypeScript ต้องใช้เราเตอร์ Vue >=4.4.0

คำเตือน

แม้ว่าการกำหนดเส้นทางแบบ unplugin-vue-router และการกำหนดเส้นทางตามไฟล์จะมีความเสถียรโดยพื้นฐาน แต่ก็มี API ทดลองอื่นๆ ที่อาจเปลี่ยนแปลงได้ (เช่น ตัวโหลดข้อมูล) ตรวจสอบให้แน่ใจว่าได้ตรวจสอบเอกสารที่เกี่ยวข้องเพื่อดูข้อมูลล่าสุด หากคุณพบปัญหา ข้อบกพร่องในการออกแบบ หรือมีแนวคิดในการปรับปรุง โปรดเปิดประเด็นหรือการสนทนา

ติดตั้ง

npm i -D unplugin-vue-router

เพิ่มปลั๊กอิน VueRouter ก่อน ปลั๊กอิน Vue:

วิท

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

วิว CLI

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

สร้าง

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

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

ตั้งค่า

หลังจากติดตั้ง คุณควรรันเซิร์ฟเวอร์ dev ของคุณ (โดยปกติคือ npm run dev ) เพื่อสร้างเวอร์ชันแรกของประเภท จากนั้นคุณจะต้องเพิ่มประเภทลงใน tsconfig.json ของคุณ

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

จากนั้น หากคุณมีไฟล์ env.d.ts เช่นเดียวกับไฟล์ที่สร้างโดย npm vue create ให้เพิ่มประเภท unplugin-vue-router/client เข้าไป:

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

หากคุณไม่มีไฟล์ env.d.ts คุณสามารถสร้างไฟล์และเพิ่มประเภท unplugin-vue-router ลงไป หรือ คุณสามารถเพิ่มลงในคุณสมบัติ types ใน tsconfig.json ของคุณ :

{
  "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 และสร้างเราเตอร์ด้วยตนเองหรือส่งต่อไปยังปลั๊กอินบางตัวได้ นี่คือตัวอย่างสตาร์ทเตอร์ของวิเทสส์:

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

• ตรวจสอบเพิ่มเติมในเอกสารประกอบ

ใบอนุญาต

เอ็มไอที