Um dos meus problemas ao trabalhar com VueJS é ao criar rotas, especialmente se o projeto está ficando maior e se torna um problema tentar manter seu route.ts ou route.js. Ainda me lembro de um projeto que tem muitas páginas que você precisa atualizar suas rotas ao criar uma nova página e atualizar seu arquivo de rotas sempre que remover uma página apenas para evitar que erros apareçam.

Então comecei a procurar como fazer o roteamento automático usando arquivo baseado. Tentar pesquisar no Google foi difícil de encontrar porque a maior parte dos resultados que encontrei na internet são principalmente para webpack e para a versão 2. Então, tenho que perguntar na discussão do repositório Vue Github e recebi uma resposta.

Apresentando o Unplugin Vue Router, este é um roteamento digitado e baseado em arquivo para Vue 3. E é realmente fácil de configurá-lo. Isso é experimental, conforme declarado no arquivo leia-me do Github.

Primeiro vamos criar nosso projeto Vue do zero. Como todos sabemos podemos gerar um projeto executando este comando e depois responder algumas opções. Se você não sabe como fazer isso, você pode verificar o Quick Start na página do VueJs.

pnpm criar vue@mais recente

pnpm create vue@latest

pnpm criar vue@mais recente Vue.js – A estrutura JavaScript progressiva √ Nome do projeto: ... vue-auto-route √ Adicionar TypeScript? ... Não / Sim √ Adicionar suporte JSX? ... Não / Sim √ Adicionar roteador Vue para desenvolvimento de aplicativos de página única? ... Não / Sim √ Adicionar Pinia para gestão estadual? ... Não / Sim √ Adicionar Vitest para testes unitários? ... Não / Sim √ Adicionar uma solução de teste ponta a ponta? " Não √ Adicionar ESLint para qualidade de código? ... Não / Sim √ Adicionar extensão Vue DevTools 7 para depuração? (experimental) ... Não / Sim Projeto de andaime em D:\Projects\Testing\vue-auto-route... Feito. Agora execute: cd vue-auto-route instalação pnpm desenvolvedor pnpm

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

Vamos fazer cd para nosso projeto e instalar as dependências. Portanto, dependendo do gerenciador de pacotes que você usou, você pode usá-lo. Para mim estou usando o pnpm e estou começando a gostar. Agora que nosso projeto foi criado, tivemos que instalar o unplugin-vue-router.

pnpm add -D unplugin-vue-router

pnpm add -D unplugin-vue-router

Certifique-se de colocar o plugin no índice 0

.
importar { fileURLToPath, URL } de "node:url"; importar VueRouter de "unplugin-vue-router/vite"; importar {defineConfig} de "vite"; importar vue de "@vitejs/plugin-vue"; // https://vitejs.dev/config/ exportar defineConfig padrão({     plug-ins: [         VueRouter({             /* opções */         }),         // ⚠️ Vue deve ser colocado após VueRouter()         vue(),     ],     resolver: {         apelido: {             "@": fileURLToPath(nova URL("./src", import.meta.url)),         },     }, });

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

});

/// ///

/// 
/// 

importar {createRouter, createWebHistory} de "vue-router"; importar {rotas, handleHotUpdate} de "vue-router/auto-routes"; const roteador = createRouter({     histórico: createWebHistory(import.meta.env.BASE_URL),     rotas, }); if (import.meta.hot) {     handleHotUpdate(roteador); } exportar roteador padrão;

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;

Vamos criar a página sobre em src\pages\about.vue.

   

   

Agora está tudo configurado para você. Se você não estiver familiarizado com a estrutura de pastas do roteador. Você pode verificar este documento https://uvr.esm.is/guide/file-based-routing.html.

Vamos tentar adicionar um componente slug como src/pages/blog/[id].vue com este conteúdo.

const {id} = useRoute().params;    

Incrível, certo? Espero que este breve blog tenha ajudado você em sua jornada VueJS. Tenha um bom dia.

Se você gostou deste artigo e gostaria de mostrar seu apoio, você pode fazê-lo facilmente comprando um café para mim. Sua contribuição é muito apreciada!

Se você gostou deste artigo e gostaria de mostrar seu apoio, você pode fazê-lo facilmente comprando um café para mim. Sua contribuição é muito apreciada!

---