Снова добро пожаловать в создание веб-приложений с Vue.js! Если вы хотите освежиться или пропустить предыдущие статьи, вот вам Часть 1 и Часть 2.
В этой статье я покажу вам, как я перестроил предыдущее приложение, используя vue-router для управления состоянием приложения вместо vuex. Хотя вы, безусловно, можете использовать и vuex, и vue-router (и я сделаю это в следующей статье), для вашего приложения это может не понадобиться. Я также решил использовать бутстрап для стилизации приложения на этот раз, в основном для того, чтобы лучше с ним познакомиться, а также для более быстрой сборки этой новой версии. Если вы хотите протестировать приложение, нажмите здесь.
Для меня главная причина использовать библиотеку маршрутизатора в одностраничном приложении - предоставить пользователю доступ к кнопкам навигации браузера. Этого очень не хватало в предыдущем приложении. Чтобы добиться такого поведения, к URL-адресу необходимо добавить маршрут. В традиционном приложении маршрут представляет собой HTML-представление на сервере. В одностраничном приложении маршруты поддерживаются в JavaScript, и каждый маршрут сопоставляется с компонентом, который должен отображаться при доступе к маршруту.
Здесь я определяю маршруты для двух вариантов использования. Первый маршрут предназначен для подробного просмотра, он имеет тип поиска и идентификатор результата поиска в качестве параметров маршрута. Второй маршрут представляет собой представление результатов поиска, он содержит тип поиска и строку запроса, введенную пользователем в качестве параметров маршрута. С помощью этих параметров маршрута я буду управлять состоянием приложения. При обновлении маршрута компоненты будут отображать себя в соответствии с этими параметрами. Чтобы использовать маршруты, которые я здесь определил, мне нужно добавить их в основной экземпляр vue.
Независимо от маршрута, я всегда хочу показывать компонент приложения, поэтому экземпляр vue по-прежнему будет отображать его в div приложения при загрузке. Компонент приложения будет отвечать за переключение других компонентов при изменении маршрута. Чтобы это произошло, компонент приложения должен отобразить компонент вида маршрутизатора, который предоставляется библиотекой vue-router.
При наличии маршрутизации следующим шагом будет определение момента изменения маршрута и реакции компонентов на изменение маршрута. Поле поиска - это основной способ взаимодействия пользователя с приложением. Таким образом, когда нажимается кнопка поиска или изменяется тип поиска, маршрут обновляется, чтобы отразить вводимые пользователем данные, и компонент результатов поиска обновляется.
Этот фрагмент из шаблона SearchBox.vue показывает, как можно изменить маршрут с помощью компонента router-link, предоставляемого vue-router.
Также можно программно изменить маршрут. Vue сделал $ router доступным, когда маршрутизатор, который я настроил выше, был добавлен в экземпляр vue. Вызов push помещает новый маршрут в стек истории браузера и делает маршрут активным. Теперь давайте посмотрим на компонент результатов поиска, чтобы увидеть, как он реагирует на изменения маршрута.
В созданном хуке жизненного цикла я вызываю функцию routeChanged. Эта функция получает тип и запрос, по которому пользователь выполняет поиск, из параметров маршрута, а затем выбирает данные в соответствии с этими параметрами. Однако этого недостаточно, created вызывается только тогда, когда результаты поиска добавляются в DOM. Чтобы результаты поиска знали об изменении маршрута, пока он активен, я использую объект watch для отслеживания $ route. Теперь при обновлении маршрута приложения для результатов поиска будет вызываться функция routeChanged.
Надеюсь, эта статья помогла вам понять, как настроить и использовать vue-router для навигации между компонентами и их синхронизации. Если вы хотите более подробно ознакомиться с этим приложением, вы можете найти исходный код здесь.
На этом пока все, не забудьте поделиться со мной своими комментариями, критикой и предложениями здесь или в твиттере Фрэнк Уилкерсон и посмотрите мой youtube, чтобы получить больше информации для разработчиков.
