Одна из моих проблем при работе с VueJS — это создание маршрутов, особенно если проект становится больше и становится проблемой поддерживать ваш Route.ts или Route.js. Я до сих пор помню проект, в котором слишком много страниц, и вам нужно обновлять маршруты при создании новой страницы, и вам нужно обновлять файл маршрутов каждый раз, когда вы удаляете страницу, чтобы избежать появления ошибок.

Итак, я начал искать, как сделать автоматическую маршрутизацию с использованием файлов. Попытку поиска в Google было трудно найти, потому что большая часть результатов, которые я нашел в Интернете, в основном относится к веб-пакету и версии 2. Поэтому мне пришлось задать этот вопрос в обсуждении репозитория Vue Github, и я получил ответ.

Представляем Unplugin Vue Router. Это типизированная файловая маршрутизация для Vue 3. И ее на самом деле легко настроить. Это экспериментальный вариант, как указано в файле readme на Github.

Сначала давайте создадим наш проект Vue с нуля. Как мы все знаем, мы можем создать проект, выполнив эту команду, а затем ответив на некоторые параметры. Если вы не знаете, как это сделать, вы можете проверить «Быстрый старт» на странице VueJs.

pnpm create vue@latest

Итак, в этом примере я создал проект именно так.

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

Мы собираемся использовать Select TypeScript. Я также включил Router, чтобы он автоматически восстанавливал страницы.

Давайте перейдем к нашему проекту и установим зависимости. Итак, в зависимости от используемого вами менеджера пакетов вы можете его использовать. Я использую pnpm, мне он начинает нравиться. Теперь, когда наш проект создан, нам нужно установить unplugin-vue-router.

pnpm add -D unplugin-vue-router

Теперь давайте обновим vite.config.ts . Убедитесь, что вы поместили плагин в индекс 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)),
        },
    },

});

Далее Давайте обновим env.d.ts, чтобы наш редактор мог легко находить типы для нашего пакета.

/// 
/// 

Затем давайте обновим index.ts нашего маршрутизатора в 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;

Теперь, когда все сделано, мы можем создать каталог src/pages, и в эту папку или каталог мы добавляем наши страницы, и он автоматически создает маршруты на основе файловой структуры. Если вы знакомы с Nuxt, то это что-то в этом роде.

Давайте создадим страницу «О программе» в src\pages\about.vue.

Давайте создадим нашу домашнюю страницу, используя индекс в src\pages\index.vue.

Затем мы можем запустить наше приложение vue, запустив сценарий разработки. пнпм разработчик. Если вы зайдете, если вы нажмете «Домой», вы будете перенаправлены на домашнюю страницу, если вы нажмете «О нас», вы будете перенаправлены на страницу «О программе».

Теперь все настроено. Если вы не знакомы со структурой папок маршрутизатора. Вы можете проверить этот документ https://uvr.esm.is/guide/file-based-routing.html.

Давайте попробуем добавить к этому контенту слаг-компонент, например src/pages/blog/[id].vue.

Теперь давайте попробуем снова запустить pnpm dev. И когда вы зайдете на http://localhost:5173/blog/6, вы должны получить это.

Потрясающе, правда? Я надеюсь, что этот короткий блог помог вам в вашем путешествии по VueJS. Хорошего дня.

Если вам понравилась эта статья и вы хотите выразить свою поддержку, вы можете легко сделать это, купив мне кофе. Ваш вклад очень ценен!

Если вам понравилась эта статья и вы хотите выразить свою поддержку, вы можете легко сделать это, купив мне кофе. Ваш вклад очень ценен!