Удалить предупреждение, генерируемое pathMatch

Введение

В этом проекте вы научитесь исправлять проблему с предупреждением в библиотеке vue-router 3.1.3. Vue-router - это популярная библиотека маршрутизации для приложений на Vue.js, и в версии 3.1.3 была ошибка, которая генерировала предупреждение, когда параметр pathMatch был пустым значением. Следуя пошаговому руководству, вы сможете найти проблему, исправить код и перестроить библиотеку, чтобы устранить предупреждение.

🎯 Задачи

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

• Определять проблему в файле params.js библиотеки vue-router 3.1.3
• Исправлять код, чтобы убрать предупреждение
• Перестраивать библиотеку vue-router 3.1.3 с исправлением
• Тестировать исправленную версию, чтобы убедиться, что предупреждение больше не отображается

🏆 Достижения

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

• Отлаживать и исправлять проблемы в сторонней библиотеке
• Разбираться в важности поддержания зависимостей актуальными и исправления известных ошибок
• Демонстрировать процесс перестройки библиотеки после внесения изменений в код
• Тестировать функциональность библиотеки, чтобы убедиться, что она работает как ожидается

Исправить предупреждение в Vue-Router 3.1.3

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

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

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

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, нажмите "/nope/", затем нажмите "test" и откройте пункт Console в консоли браузера, вы увидите следующее сообщение:

[vue-router] missing param for named route "NotFound": Expected "0" to be defined

В этом шаге вы научитесь исправлять предупреждение, генерируемое проблемой pathMatch в коде vue-router 3.1.3.

1. Откройте файл vue-router-3.1.3/src/util/params.js.
2. Найдите код на строке 28, который вызывает предупреждение:

if (process.env.NODE_ENV !== "production") {
  warn(false, `missing param for ${routeMsg}: ${e.message}`);
}

3. Закомментируйте вызов функции warn, чтобы убрать предупреждение:

if (process.env.NODE_ENV !== "production") {
  // warn(false, `missing param for ${routeMsg}: ${e.message}`)
}

Это предотвратит отображение предупреждения в консоли.

Перестроить и протестировать проект Vue-Router 3.1.3

В этом шаге вы перестроите и протестируете проект vue-router 3.1.3 после исправления предупреждения.

1. Откройте терминал и перейдите в директорию vue-router-3.1.3.
2. Запустите команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс зависнет долго, нажмите Ctrl+C, чтобы прервать его, а затем запустите эту команду снова.)
3. После успешной установки всех зависимостей запустите команду npm run build, чтобы перестроить и выпустить проект. Это создаст новую сборку библиотеки vue-router 3.1.3 с исправлением предупреждения.
4. Откройте страницу Web 8080 в вашем браузере.
5. Нажмите на ссылку "/nope/", затем нажмите на ссылку "test".
6. Откройте консоль браузера и убедитесь, что предупреждающее сообщение больше не отображается.

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

Резюме

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