Vue uto Penghalaan Mengikut Struktur Fail

Salah satu masalah saya apabila bekerja dengan VueJS ialah apabila mencipta laluan terutamanya jika projek semakin besar dan ia menjadi masalah cuba mengekalkan route.ts atau route.js anda. Saya masih ingat projek yang mempunyai terlalu banyak halaman yang perlu anda kemas kini laluan anda apabila anda membuat halaman baharu dan anda perlu mengemas kini fail laluan anda apabila anda mengalih keluar halaman hanya untuk mengelakkan ralat muncul.

Jadi saya mula mencari cara untuk membuat penghalaan automatik menggunakan berasaskan fail. Cuba mencari di google adalah sukar untuk dicari kerana kebanyakan hasil yang saya dapati di internet kebanyakannya untuk webpack dan untuk versi 2. Jadi saya perlu bertanya dalam perbincangan repo Vue Github dan saya mendapat jawapan.

Memperkenalkan Penghala Unplugin Vue ini ialah penghalaan berasaskan fail Ditaip untuk Vue 3. Dan sebenarnya mudah untuk menyediakannya. Ini adalah percubaan seperti yang mereka nyatakan dalam fail readme Github mereka.

Mula-mula Mari buat projek Vue kami dari awal. Seperti yang kita semua tahu kita boleh menjana projek dengan menjalankan arahan ini, dan kemudian menjawab beberapa pilihan. Jika anda tidak biasa melakukannya, anda boleh menyemak Permulaan Pantas dalam Halaman VueJs.

pnpm create vue@latest

Jadi dalam contoh ini beginilah cara saya mencipta projek.

pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-auto-route
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\Projects\Testing\vue-auto-route...

Done. Now run:

  cd vue-auto-route
  pnpm install
  pnpm dev

Kami akan menggunakan Select TypeScript. Saya juga mendayakan Penghala supaya ia menjana semula halaman secara automatik untuk saya.

Mari cd ke projek kami, dan pasang kebergantungan. Jadi bergantung pada pengurus pakej anda yang anda gunakan, anda boleh menggunakannya. Bagi saya saya menggunakan pnpm saya mula menyukainya. Kini setelah projek kami dibuat, kami kini terpaksa memasang unplugin-vue-router.

pnpm add -D unplugin-vue-router

Sekarang, mari kemas kini vite.config.ts . Pastikan anda meletakkan pemalam dalam indeks 0.

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VueRouter({
            /* options */
        }),
        // ⚠️ Vue must be placed after VueRouter()
        vue(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },

});

Seterusnya Mari Kemas Kini env.d.ts supaya editor kami dapat mencari jenis pakej kami dengan mudah.

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

Kemudian marilah kami mengemas kini index.ts penghala kami dalam src/router/index.ts.

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});

if (import.meta.hot) {
    handleHotUpdate(router);
}

export default router;

Sekarang segala-galanya selesai, kami kini boleh mencipta direktori src/pages, dan dalam folder atau direktori ini adalah tempat kami menambah halaman kami dan ia secara automatik mencipta laluan berdasarkan struktur fail. Jika anda biasa dengan Nuxt, ia adalah seperti itu.

Mari buat tentang halaman dalam srcpagesabout.vue.

<template>
    <div>This is the about page</div>
</template>

Mari buat halaman utama kami dengan menggunakan indeks dalam srcpagesindex.vue.

<template>
    <div>This is Home Page</div>
</template>

Kemudian kami boleh menjalankan aplikasi vue kami, dengan menjalankan skrip dev. pnpm dev. Anda pergi, jika anda mengklik Laman Utama, anda akan diubah hala ke halaman utama, jika anda mengklik tentang anda akan diubah hala ke halaman tentang.

Kini, semuanya disediakan untuk anda. Jika anda tidak biasa tentang struktur folder penghala. Anda boleh menyemak dokumen ini https://uvr.esm.is/guide/file-based-routing.html.

Mari cuba tambah komponen slug seperti src/pages/blog/[id].vue dengan kandungan ini.

<script setup>
const { id } = useRoute().params;
</script>
<template>
    <div>This is the blog post with id: {{ id }}</div>
</template>

Sekarang mari cuba jalankan pnpm dev sekali lagi. Dan apabila anda pergi ke http://localhost:5173/blog/6, anda sepatutnya mendapat ini.

Hebat Kan? Saya harap blog pendek ini membantu anda dalam Perjalanan VueJS anda. Selamat hari raya.

Jika anda menikmati artikel ini dan ingin menunjukkan sokongan anda, anda boleh melakukannya dengan mudah dengan membelikan saya kopi. Sumbangan anda amat dihargai!

---

Jika anda menikmati artikel ini dan ingin menunjukkan sokongan anda, anda boleh melakukannya dengan mudah dengan membelikan saya kopi. Sumbangan anda amat dihargai!

Atas ialah kandungan terperinci Vue uto Penghalaan Mengikut Struktur Fail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!