Пустой pathMatch для правильного вычисления пути

Введение

В этом проекте вы научитесь исправлять ошибку в библиотеке vue-router-3.1.5. Эта ошибка связана с функцией fillParams, которая отвечает за заполнение параметров в URL-пути. Когда параметр pathMatch является пустой строкой, это может повлиять на вычисление правильного пути.

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

🎯 Задачи

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

• Как найти функцию fillParams в файле vue-router-3.1.5/src/util/params.js
• Как изменить функцию fillParams для решения проблемы с пустым pathMatch
• Как перестроить проект vue-router с обновленной функцией fillParams
• Как протестировать исправление, обновив окно браузера и проверив правильность работы адресной строки

🏆 Достижения

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

• Идентифицировать и исправлять ошибки в сторонней библиотеке
• Перестраивать проект после внесения изменений в код
• Протестировать исправление, чтобы убедиться, что достигнуто требуемое поведение

Исправить функцию fillParams

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

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

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

3. Скопируйте адрес из上图 в браузере, чтобы открыть новое окно, а затем нажмите кнопки "[button1]" и "[button2]", эффект адресной строки будет следующим:

В этом шаге вы исправите функцию fillParams в файле vue-router-3.1.5/src/util/params.js, чтобы решить проблему с пустым pathMatch.

1. Откройте файл vue-router-3.1.5/src/util/params.js.
2. Найдите функцию fillParams.
3. Добавьте следующий код после строки if (params.pathMatch) params[0] = params.pathMatch:

if (params.pathMatch === "") params[0] = "";

Этот код проверяет, является ли params.pathMatch пустой строкой. Если это так, функция вернет исходный path, вместо того чтобы пытаться заполнить параметры.

Обновленная функция fillParams должна выглядеть так:

export function fillParams(
  path: string,
  params:?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV!== "production") {
      // Fix #3072 no warn if `pathMatch` is string
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // delete the 0 if it was added
    delete params[0];
  }
}

Перестроить и протестировать проект vue-router

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

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

Теперь адресная строка должна отображать правильный путь, даже когда pathMatch является пустой строкой. Изображение эффекта после исправления проблемы показано ниже:

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

Резюме

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