Добавление предупреждения о устаревании к Vue Router

Введение

В этом проекте вы научитесь добавлять предупреждение о устаревании к методу router.addRoutes() в версии vue-router-3.4.9. Это важная задача, так как метод router.addRoutes() был помечен как устаревший в Vue Router v3.5.0 и был удален в Vue Router 4. Добавив предупреждение о устаревании, вы сможете помочь разработчикам, использующим старую версию Vue Router, узнать о forthcoming изменениях и перейти к новому методу router.addRoute().

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Найти метод addRoutes в файле vue-router-3.4.9/src/index.js
• Добавить предупреждение о устаревании к методу addRoutes
• Пересобрать и опубликовать обновленный пакет vue-router-3.4.9
• Перезапустить приложение и наблюдать за сообщением о предупреждении в консоли браузера

🏆 Достижения

После завершения этого проекта вы сможете:

• Идентифицировать и изменять устаревшие методы в библиотеке
• Разобраться в важности предоставления предупреждений о устаревании, чтобы помочь разработчикам переключаться на новые версии
• Изучить процесс пересборки и публикации обновленной версии библиотеки
• Наблюдать за эффектами своих изменений в работающем приложении

Добавить предупреждение о устаревании к router.addRoutes()

Для начала ознакомьтесь с структурой каталога файлов слева, которая выглядит следующим образом:

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

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Откройте консоль браузера и изучите вывод, который должен выглядеть следующим образом без сообщений о предупреждениях.

В этом шаге вы научитесь добавлять предупреждение о устаревании к методу router.addRoutes() в версии vue-router-3.4.9.

1. Откройте файл vue-router-3.4.9/src/index.js.

2. Найдите метод addRoutes класса VueRouter.

3. Добавьте следующее сообщение о предупреждении к методу:

   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());
     }
   }
   

   Это выведет сообщение о предупреждении в консоль при вызове метода addRoutes().

Перезапустите приложение и наблюдайте за предупреждением

В этом шаге вы перезапустите приложение и изучите сообщение о предупреждении в консоли браузера.

1. В терминале перейдите в каталог vue-router-3.4.9.

2. Выполните команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс зависнет долго, нажмите Ctrl+C, чтобы прервать его, а затем запустите эту команду снова.)

3. После успешной установки всех зависимостей выполните команду npm run build, чтобы пересобрать и выпустить проект.

4. Вернитесь на веб-страницу и обновите страницу.

5. Откройте консоль браузера и изучите вывод. Вы должны увидеть сообщение о предупреждении, напечатанное в консоли:

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

   Это подтверждает, что предупреждение о устаревании было успешно добавлено к методу router.addRoutes().

Поздравляем! Вы завершили проект, добавив предупреждение о устаревании к методу router.addRoutes() в версии vue-router-3.4.9.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.