pathMatch Vazio para Cálculo Correto de Caminho

Introdução

Neste projeto, você aprenderá como corrigir um bug na biblioteca vue-router-3.1.5. O bug está relacionado à função fillParams, responsável por preencher os parâmetros no caminho da URL. Quando o parâmetro pathMatch é uma string vazia, isso pode afetar o cálculo do caminho correto.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como localizar a função fillParams no arquivo vue-router-3.1.5/src/util/params.js
• Como modificar a função fillParams para resolver o problema com pathMatch vazio
• Como reconstruir o projeto vue-router com a função fillParams atualizada
• Como testar a correção, atualizando a janela do navegador e verificando o comportamento correto da barra de endereço

🏆 Conquistas

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

• Identificar e corrigir bugs em uma biblioteca de terceiros
• Reconstruir um projeto após fazer alterações no código
• Testar uma correção para garantir que o comportamento desejado seja alcançado

Corrigir a Função fillParams

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

├── vue-router-3.1.5
├── 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 figura acima no navegador para abrir uma nova janela e, em seguida, clique nos botões "[button1]" e "[button2]". O efeito da barra de endereço é o seguinte:

   

Nesta etapa, você corrigirá a função fillParams no arquivo vue-router-3.1.5/src/util/params.js para resolver o problema com pathMatch vazio.

1. Abra o arquivo vue-router-3.1.5/src/util/params.js.
2. Localize a função fillParams.
3. Adicione o seguinte código após a linha if (params.pathMatch) params[0] = params.pathMatch:

if (params.pathMatch === "") params[0] = "";

Este código verifica se params.pathMatch é uma string vazia. Se for, a função retornará o path original em vez de tentar preencher os parâmetros.

A função fillParams atualizada deve ser semelhante a esta:

export function fillParams(
  path: string,
  params: ?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV !== "production") {
      // Fix #3072 no warn if `pathMatch` is string
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // delete the 0 if it was added
    delete params[0];
  }
}

Reconstruir e Testar o Projeto vue-router

Nesta etapa, você testará a correção atualizando a janela do navegador.

1. Abra o diretório vue-router-3.1.5 no terminal.
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.
4. Volte para a janela do navegador e atualize a página.
5. Clique nos botões "[button1]" e "[button2]" novamente e observe o comportamento da barra de endereço.

A barra de endereço agora deve exibir o caminho correto, mesmo quando pathMatch é uma string vazia. A imagem do efeito após o problema ser corrigido é mostrada abaixo:

Parabéns! Você corrigiu com sucesso o problema na biblioteca vue-router-3.1.5.

Resumo

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