Корректно предупреждать о неправильном использовании v-Slot

Введение

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

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

🎯 Задачи

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

• Как локализовать и идентифицировать проблему в коде vue-router 3.1.3
• Как исправить проблему, изменив код в файле link.js
• Как перестроить и выпустить исправленный проект vue-router 3.1.3
• Как проверить эффект исправления, протестировав приложение

🏆 Достижения

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

• Отлаживать и исправлять проблемы в сторонней библиотеке
• Перестраивать и выпускать проект после внесения изменений в код
• Тестировать и проверять функциональность исправленной проблемы

Исправить проблему с V-Slot API в Vue-Router 3.1.3

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

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

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

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

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

1. Откройте файл vue-router-3.1.3/src/components/link.js.
2. Найдите следующий фрагмент кода:

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.props.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

3. Обновите код следующим образом:

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

Основное изменение в сообщении об ошибке, где this.props.to заменено на this.to.

Перестроить и протестировать исправленный 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, чтобы перестроить и выпустить проект.
4. Нажмите на пункт "Web 8080" в верхней части ВМ и обновите страницу вручную.
5. Откройте консоль браузера и убедитесь, что ошибка "TypeError: this.props is undefined" больше не отображается.
6. Проверьте, что страница теперь правильно отображается с исправленной проблемой с v-slot API.

Изображение эффекта после исправления проблемы показано ниже:

Резюме

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