Значение запроса маршрутизатора изменилось

Введение

В этом проекте вы научитесь решать проблему в версии vue-router v3.4.0, когда неопределенные значения в запросах маршрутизатора теперь изменяются на неопределенные строки. Вы порешаете эту проблему, изменив функцию resolveQuery в файле query.js библиотеки vue-router.

👀 Предварительный просмотр

🎯 Задачи

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

• Найти и понять функцию resolveQuery в файле query.js
• Изменить функцию resolveQuery для корректной обработки неопределенных значений в запросе
• Пересобрать проект vue-router 3.4.0 с исправлением
• Проверить исправление, чтобы убедиться, что неопределенные значения в запросе теперь правильно отображаются в виде пустых строк

🏆 Достижения

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

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

Skills Graph

Настройка структуры проекта

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

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

1. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
2. Откройте "Web 8080" в верхней части ВМ и обновите ее вручную, эффект должен быть следующим:

3. Скопируйте адрес из изображения выше в своем браузере и откройте новое окно, чтобы увидеть адресную строку и как выглядит страница.

Решение проблемы с неопределенными значениями запроса в Vue-Router 3.4.0

В этом шаге вы научитесь решать проблему, когда неопределенные значения в запросах маршрутизатора в версии vue-router v3.4.0 теперь изменяются на неопределенные строки.

1. Откройте файл vue-router-3.4.0/src/util/query.js.
2. Найдите функцию resolveQuery в файле.
3. Обновите функцию resolveQuery для обработки неопределенных значений в запросе. Измените код следующим образом:

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

Основные изменения:

• В присвоении parsedQuery[key] =... мы проверяем, является ли value undefined. Если да, мы присваиваем пустую строку '' вместо значения undefined.
• Для массивных значений мы также проверяем, являются ли отдельные элементы undefined и заменяем их на пустую строку.

Это гарантирует, что неопределенные значения в запросе правильно обрабатываются и не преобразуются в неопределенные строки.

Проверить исправление

1. Откройте директорию vue-router-3.4.0 в терминале.
2. Выполните команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс застрянет долго, нажмите Ctrl+C, чтобы прервать его, а затем запустите эту команду снова.)
3. После успешной установки всех зависимостей выполните команду npm run build, чтобы пересобрать и выпустить проект.
4. Обновите окно браузера, которое отображало начальную страницу.
5. Проверьте поведение страницы и URL в адресной строке. Теперь неопределенные значения в запросе должны быть правильно обработаны и отображены в виде пустых строк.

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

Резюме

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