Исправление функции cleanPath в Vue Router

Введение

В этом проекте вы научитесь исправлять ошибку в библиотеке vue-router, изменив функцию cleanPath. Библиотека vue-router - популярное решение для маршрутизации в приложениях на Vue.js, и важно убедиться, что она работает правильно, особенно для граничных случаев, таких как пути, начинающиеся с нескольких косых черт.

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

🎯 Задачи

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

• понять проблему с функцией cleanPath в библиотеке vue-router
• установить необходимые зависимости для проекта
• найти и изменить функцию cleanPath, чтобы исправить проблему
• пересобрать проект с обновленной функцией cleanPath
• протестировать исправление, чтобы убедиться, что проблема решена

🏆 Достижения

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

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

Skills Graph

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

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

Библиотека vue-router имеет ошибку в версии 3.5.2, при которой путь, начинающийся с нескольких косых черт (///), может фактически перенаправить на другой домен. Это происходит потому, что функция cleanPath в библиотеке заменяет только две косые черты, вместо всех нескольких косых черт.

Чтобы исправить эту проблему, вам нужно изменить функцию cleanPath в файле vue-router-3.5.2/src/util/path.js.

Для начала посмотрите на структуру каталогов файлов слева, как показано ниже:

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

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

3. Скопируйте адрес из изображения выше, чтобы открыть новое окно в вашем браузере, и нажмите кнопку "Go to Foo", и страница перейдёт на страницу Google.

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

1. Откройте файл vue-router-3.5.2/src/util/path.js.

2. Найдите функцию cleanPath:

   export function cleanPath(path: string): string {
     return path.replace(/\/\//g, "/");
   }

3. Обновите функцию cleanPath, чтобы заменить все несколько косых черт на одну косую черту:

   export function cleanPath(path: string): string {
     return path.replace(/\/+/g, '/');
   }

   Регулярное выражение /\/+/g будет соответствовать одному или более последовательных косым чертам и заменять их на одну косую черту.

Перестройте и протестируйте проект

1. В терминале перейдите в директорию vue-router-3.5.2.
2. Выполните команду npm install, чтобы установить зависимости. Этот процесс может занять некоторое время, будьте терпеливы. (Если процесс застрянет долго, нажмите Ctrl+C, чтобы прервать его, а затем запустите эту команду снова.)
3. После успешной установки всех зависимостей выполните команду npm run build, чтобы перестроить и выпустить проект с обновленной функцией cleanPath.
4. Вернитесь на веб-страницу и обновите страницу.
5. Нажмите кнопку "Go to Foo", и вы должны увидеть, что страница不再перенаправляется на страницу Google, а остается на локальном приложении.

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

Резюме

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