Valor da Query do Router Alterado

Introdução

Neste projeto, você aprenderá como resolver um problema na versão vue-router v3.4.0, onde valores indefinidos (undefined) em consultas (queries) do roteador agora são alterados para strings "undefined". Você corrigirá este problema modificando a função resolveQuery no arquivo query.js da biblioteca vue-router.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Localizar e entender a função resolveQuery no arquivo query.js
• Modificar a função resolveQuery para lidar corretamente com valores indefinidos na consulta
• Reconstruir o projeto vue-router 3.4.0 com a correção
• Testar a correção para garantir que os valores indefinidos na consulta agora sejam exibidos corretamente como strings vazias

🏆 Conquistas

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

• Identificar e corrigir problemas em uma biblioteca de terceiros
• Aplicar técnicas para modificar e reconstruir um projeto para aplicar uma correção
• Entender a importância de testar minuciosamente as alterações para garantir que o comportamento desejado seja alcançado

Configurar a Estrutura do Projeto

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

├── vue-router-3.4.0
├── 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 no seu navegador e abra uma nova janela para ver a barra de endereço e como a página se parece.

   

Resolver o Problema de Valor Indefinido na Query do Vue-Router 3.4.0

Nesta etapa, você aprenderá como resolver o problema em que valores indefinidos (undefined) em consultas (queries) do roteador agora são alterados para strings "undefined" na versão vue-router v3.4.0.

1. Abra o arquivo vue-router-3.4.0/src/util/query.js.
2. Localize a função resolveQuery no arquivo.
3. Atualize a função resolveQuery para lidar com os valores indefinidos na consulta. Modifique o código da seguinte forma:

export function resolveQuery(
  query: ?string,
  extraQuery: Dictionary<string> = {},
  _parseQuery: ?Function
): Dictionary<string> {
  // ...

  // TODO
  for (const key in extraQuery) {
    const value = extraQuery[key];
    parsedQuery[key] = Array.isArray(value)
      ? value.map((v) => (!v ? v : "" + v))
      : !value
        ? value
        : "" + value;
  }
  return parsedQuery;
}

As principais alterações são:

• Na atribuição parsedQuery[key] = ..., verificamos se o value é undefined. Se for, atribuímos uma string vazia '' em vez do valor undefined.
• Para valores de array, também verificamos se os elementos individuais são undefined e os substituímos por uma string vazia.

Isso garante que os valores indefinidos na consulta sejam tratados corretamente e não sejam convertidos em strings "undefined".

Testar a Correção

1. Abra o diretório vue-router-3.4.0 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. Atualize a janela do navegador que estava exibindo a página inicial.

5. Observe o comportamento da página e a URL na barra de endereço. Os valores indefinidos na consulta agora devem ser tratados corretamente e exibidos como strings vazias.

   

Parabéns! Você corrigiu com sucesso o problema de valor de consulta indefinido na versão vue-router 3.4.0.

Resumo

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