Corrigindo a Função cleanPath do Vue Router

Introdução

Neste projeto, você aprenderá como corrigir um bug na biblioteca vue-router modificando a função cleanPath. A biblioteca vue-router é uma solução de roteamento popular para aplicações Vue.js, e é importante garantir que ela funcione corretamente, especialmente para casos extremos como caminhos que começam com múltiplas barras.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Entender o problema com a função cleanPath na biblioteca vue-router
• Instalar as dependências necessárias para o projeto
• Localizar e modificar a função cleanPath para corrigir o problema
• Reconstruir o projeto com a função cleanPath atualizada
• Testar a correção para garantir que o problema seja resolvido

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Identificar e diagnosticar problemas em bibliotecas de terceiros
• Modificar e atualizar o código em uma biblioteca de terceiros para corrigir um bug
• Reconstruir e lançar um projeto com o código atualizado
• Testar a correção para garantir que o problema seja resolvido

Configurar a Estrutura do Projeto

Nesta etapa, você configurará a estrutura do projeto e aprenderá sobre o problema na biblioteca vue-router e como corrigi-lo.

A biblioteca vue-router tem um bug na versão 3.5.2 onde um caminho que começa com múltiplas barras (///) pode, na verdade, redirecionar para outro domínio. Isso ocorre porque a função cleanPath na biblioteca substitui apenas duas barras, em vez de todas as múltiplas barras.

Para corrigir este problema, você precisará modificar a função cleanPath no arquivo vue-router-3.5.2/src/util/path.js.

Para começar, observe a estrutura de diretórios dos arquivos à esquerda, conforme segue:

├── vue-router-3.5.2
├── vue.js
└── index.html

1. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

2. Abra "Web 8080" no topo da VM e atualize-o manualmente; o efeito deve ser o seguinte:

   

3. Copie o endereço na imagem acima para abrir uma nova janela no seu navegador e clique no botão "Go to Foo", e a página irá saltar para uma página do Google.

   

Corrigir a Função cleanPath

1. Abra o arquivo vue-router-3.5.2/src/util/path.js.

2. Localize a função cleanPath:

   export function cleanPath(path: string): string {
     return path.replace(/\/\//g, "/");
   }
   

3. Atualize a função cleanPath para substituir todas as múltiplas barras por uma única barra:

   export function cleanPath(path: string): string {
     return path.replace(/\/+/g, '/');
   }
   

   A expressão regular /\/+/g corresponderá a uma ou mais barras consecutivas e as substituirá por uma única barra.

Reconstruir e Testar o Projeto

1. No terminal, navegue até o diretório vue-router-3.5.2.

2. Execute o comando npm install para instalar as dependências. Este processo pode levar algum tempo, por favor, seja paciente. (Se ficar preso por muito tempo, pressione Ctrl+C para terminar o processo e, em seguida, execute este comando novamente.)

3. Após todas as dependências terem sido instaladas com sucesso, execute o comando npm run build para reconstruir e lançar o projeto com a função cleanPath atualizada.

4. Volte para a página web e atualize a página.

5. Clique no botão "Go to Foo", e você deverá ver que a página não redireciona mais para uma página do Google, mas sim permanece na aplicação local.

   

Parabéns! Você corrigiu com sucesso o problema na biblioteca vue-router atualizando a função cleanPath.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.