Revisitar Rota Aciona Muito Cedo

Introdução

Neste projeto, você aprenderá como corrigir um bug no Vue Router v2.5.2, onde a função next() de beforeRouteUpdate é acionada muito cedo ao revisitar uma rota em uma transição "out-in".

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como localizar e entender o problema no arquivo vue-router-2.5.2/src/components/view.js
• Como corrigir o problema atualizando a função data.registerRouteInstance
• Como reconstruir o projeto vue-router-2.5.2 com a correção
• Como testar a correção para garantir que o problema seja resolvido

🏆 Conquistas

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

• Identificar e corrigir problemas na biblioteca Vue Router
• Reconstruir um projeto após fazer alterações no código
• Testar e verificar a correção para garantir que ela resolva o problema

Corrigindo o Problema

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

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

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

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver o efeito da página, conforme descrito abaixo:

• Quando você clicar em "to /", a página exibirá "This is A".
• Quando você clicar em "to /b", a página exibirá "This is B".
• Quando você clicar em "to /" novamente, a página exibirá "This is".

Nesta etapa, você corrigirá o problema no arquivo vue-router-2.5.2/src/components/view.js.

1. Abra o arquivo vue-router-2.5.2/src/components/view.js.

2. Localize a linha 53 do arquivo, que é a função data.registerRouteInstance.

3. Atualize a função data.registerRouteInstance da seguinte forma:

   data.registerRouteInstance = (vm, val) => {
     // val could be undefined for unregistration
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   A alteração aqui é verificar se val e matched.instances[name] são diferentes, ou se val é falsy e matched.instances[name] é o mesmo que vm. Isso garante que o hook registerRouteInstance seja chamado apenas quando a instância realmente mudou.

4. Salve as alterações no arquivo view.js.

Reconstruir e Testar o Projeto

Nesta etapa, você reconstruirá o projeto vue-router-2.5.2 e testará o efeito corrigido.

1. Abra o diretório vue-router-2.5.2 no terminal.
2. Execute o comando npm install para instalar as dependências. Este processo pode levar um tempo, por favor, seja paciente. (Se ficar travado 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. Abra a aba "Web 8080" na VM para ver a aplicação atualizada.
5. Clique nos botões "to /", "to /b" e "to /" para verificar se o problema foi corrigido.

A página agora deve exibir o conteúdo correto ao revisitar a rota, conforme mostrado no efeito atualizado:

Parabéns! Você corrigiu com sucesso o problema na versão vue-router-2.5.2 do código.

Resumo

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