Adicionando Aviso de Depreciação ao Vue Router

Introdução

Neste projeto, você aprenderá como adicionar um aviso de depreciação ao método router.addRoutes() na versão vue-router-3.4.9. Esta é uma tarefa importante, pois o método router.addRoutes() foi depreciado no Vue Router v3.5.0 e foi removido no Vue Router 4. Ao adicionar o aviso de depreciação, você pode ajudar os desenvolvedores que usam a versão mais antiga do Vue Router a estarem cientes das próximas mudanças e migrarem para o novo método router.addRoute().

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Localizar o método addRoutes no arquivo vue-router-3.4.9/src/index.js
• Adicionar um aviso de depreciação ao método addRoutes
• Reconstruir e publicar o pacote vue-router-3.4.9 atualizado
• Reiniciar a aplicação e observar a mensagem de aviso no console do navegador

🏆 Conquistas

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

• Identificar e modificar métodos depreciados em uma biblioteca
• Compreender a importância de fornecer avisos de depreciação para ajudar os desenvolvedores na transição para versões mais recentes
• Aprender o processo de reconstrução e publicação de uma versão atualizada de uma biblioteca
• Observar os efeitos de suas alterações na aplicação em execução

Adicionar um Aviso de Depreciação ao router.addRoutes()

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

├── vue-router-3.4.9
├── vue.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; você verá a página.

Abra o console do navegador e observe a saída, que deve ser semelhante à seguinte, sem mensagens de aviso.

Nesta etapa, você aprenderá como adicionar um aviso de depreciação ao método router.addRoutes() na versão vue-router-3.4.9.

1. Abra o arquivo vue-router-3.4.9/src/index.js.

2. Localize o método addRoutes da classe VueRouter.

3. Adicione a seguinte mensagem de aviso ao método:

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.");
     this.matcher.addRoutes(routes);
     if (this.history.current !== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }
   

   Isso imprimirá uma mensagem de aviso no console quando o método addRoutes() for chamado.

Reinicie a Aplicação e Observe o Aviso

Nesta etapa, você reiniciará a aplicação e observará a mensagem de aviso no console do navegador.

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

2. Execute o comando npm install para instalar as dependências. Este processo pode levar algum tempo, por favor, seja paciente. (Se ficar travado por muito tempo, pressione Ctrl+C para encerrar 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 página web e atualize a página.

5. Abra o console do navegador e observe a saída. Você deve ver a mensagem de aviso impressa no console:

   router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
   

   Isso confirma que o aviso de depreciação foi adicionado com sucesso ao método router.addRoutes().

Parabéns! Você concluiu o projeto adicionando um aviso de depreciação ao método router.addRoutes() na versão vue-router-3.4.9.

Resumo

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