Переход по маршруту активируется слишком рано

Введение

В этом проекте вы научитесь исправлять ошибку в Vue Router v2.5.2, когда функция next() в beforeRouteUpdate вызывается слишком рано при повторном посещении маршрута в переходе "внешний-внутренний".

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

🎯 Задачи

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

• Как локализовать и понять проблему в файле vue-router-2.5.2/src/components/view.js
• Как исправить проблему, обновив функцию data.registerRouteInstance
• Как пересобрать проект vue-router-2.5.2 с исправлением
• Как протестировать исправление, чтобы убедиться, что проблема решена

🏆 Достижения

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

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

Исправление проблемы

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

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

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

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

• При нажатии на "to /" страница будет отображать "This is A".
• При нажатии на "to /b" страница будет отображать "This is B".
• При повторном нажатии на "to /" страница будет отображать "This is".

В этом шаге вы исправите проблему в файле vue-router-2.5.2/src/components/view.js.

1. Откройте файл vue-router-2.5.2/src/components/view.js.

2. Найдите строку 53 файла, которая представляет функцию data.registerRouteInstance.

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

   data.registerRouteInstance = (vm, val) => {
     // val может быть undefined при отмене регистрации
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   Здесь изменение заключается в том, чтобы проверить, отличаются ли val и matched.instances[name], или val ложно, а matched.instances[name] совпадает с vm. Это гарантирует, что хук registerRouteInstance вызывается только тогда, когда экземпляр действительно изменился.

4. Сохраните изменения в файле view.js.

Пересборка и тестирование проекта

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

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

Теперь при повторном посещении маршрута страница должна отображать правильный контент, как показано в обновленном эффекте:

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

Резюме

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