В этом уроке мы узнаем, как использовать маршрутизатор Vue.
Мы создадим наш проект с использованием Vue CLI, и выбранный нами шаблон будет простым веб-пакетом.
По умолчанию webpack simple не поставляется с маршрутизатором vue. Итак, сначала нам нужно установить vue router, используя: npm install vue-router -S.
Если вы используете webpack в качестве шаблона, по умолчанию будет установлен vue router.
Итак, первый вопрос, что такое роутер?
Раньше веб-сайт состоял из набора HTML-страниц. Всякий раз, когда вам нужно добавить новое содержимое, вы просто создаете новый HTML-файл и добавляете его URL-адрес на свою домашнюю страницу, чтобы пользователи могли найти новую страницу.
Судя по всему, это не очень хороший дизайн, особенно для веб-сайта, на котором публикуется много контента.
После многих лет разработки была разработана одностраничная структура приложения.
Одностраничное приложение, как следует из названия, имеет только одну страницу. Он отображает различное содержимое, переключая компоненты. Маршрутизатор - это то, что мы используем для управления переключателями компонентов.
Вы можете думать о роутере как о заведующем магазином. Он устанавливает и удаляет компоненты по запросу пользователя.
Взгляните на этот пример.
Это очень простой СПА. Он состоит из четырех частей.
Это исходный код этой программы:
В папке с компонентами у нас было шесть файлов vue с точками. Другими словами, у нас получилось шесть компонентов.
Часть 1 создана header.vue. Часть 2 создана сайтом navi.vue. Часть 4 создана footer.vue. Часть 3 состоит из one.vue, two.vue и three.vue.
В части 3 мы хотим отображать только один компонент за раз, и мы хотим выбирать компоненты с помощью кнопок из части 2.
Мы можем попросить маршрутизатор Vue помочь нам в управлении файлом компонента один, два и три.
Vue router - это плагин Vue. Прежде чем вы сможете его использовать, вам нужно сделать две вещи: настроить vue router и внедрить его в корневой экземпляр vue.
Начнем с настройки маршрутизатора vue.
Для лучшего управления программой мы обычно храним всю информацию о конфигурации маршрутизатора в одном JS-файле.
После того, как мы завершили этот JS-файл, мы импортируем его в файл main.js и вставляем в корневой экземпляр Vue. Вы найдете множество демонстраций программ, настраивающих vue router напрямую в main.js. Вы можете это сделать, но мы рекомендуем использовать независимый JS-файл для настройки маршрутизатора. Это может значительно упростить обслуживание программы в будущем.
В папке SRC создаем новый файл: router. Внутри роутера мы создаем новый файл: router.js. Router.js будет нашим файлом конфигурации маршрутизатора.
Если вы используете веб-пакет в качестве шаблона, вы найдете папку маршрутизатора в папке SRC. Файл index.js внутри него является файлом конфигурации маршрутизатора.
Каждый файл router.js имеет фиксированную структуру из 4 частей.
Во-первых, нам нужно импортировать два пакета: vue и vue router.
Это очень важно. Многие люди склонны забывать импортировать пакет Vue.
Помните, что в js-файле router dot вам нужно импортировать два пакета: vue и vue router.
Затем мы берем на себя управление компонентами из файла app.vue.
Внимание, мы берем на себя только те компоненты, которыми должен управлять vue router. Остальные компоненты по-прежнему управляются файлом vue с точкой приложения.
Здесь мы хотим, чтобы vue router управлял первым, вторым и третьим компонентами.
Компоненты header, footer и navi по-прежнему управляются файлом app.vue.
В js-файле router dot мы вызываем метод use из объекта vue.
Значение аргумента - vue router.
Далее мы создаем константу: routes.
Эта константа будет записывать все правила маршрутизации.
Его значение - массив. Каждый элемент массива - это объект.
Один объект представляет одно правило маршрутизации.
Всего у нас три кнопки. Итак, нам нужно три объекта.
Каждый объект содержит два свойства: путь и компонент. Позже вы добавите другие свойства.
Компонент здесь в единственном числе.
Значение пути - это виртуальный URL. Вы можете думать об этом как об удостоверении личности. Он представляет собой компонент, объявленный ниже. Маршрутизатор Vue находит компонент, использующий его.
Его стоимость подбирается нами. Установленное вами значение будет отображаться в адресном поле браузера пользователя.
Мы рекомендуем начинать URL-адрес с косой черты. Косая черта обозначает корневую папку.
После того, как вы установили все правила маршрутизации, вы можете создать конструктор VueRouter и использовать постоянные маршруты в качестве значения аргумента. Затем вы создаете его и экспортируете по умолчанию.
Теперь наша работа с файлом router.js завершена.
В основном файле dot js нам нужно импортировать файл router dot js.
Затем мы устанавливаем роутер в экземпляр Vue.
Теперь наш файл конфигурации маршрутизатора готов, и мы внедрили маршрутизатор в корневой экземпляр vue.
Здесь мы использовали новую функцию es6. Маршрутизатор автоматически превратится в маршрутизатор: маршрутизатор. Вам просто нужно убедиться, что вы используете маршрутизатор при импорте файла конфигурации маршрутизатора. Не выбирайте другие имена.
Далее заходим в файл navi.vue и устанавливаем router-link. Маршрутизатор-ссылка работает как тег A. Щелкните по нему, соответствующий компонент будет установлен. Его атрибут TO похож на атрибут HREF в теге A. Присваиваем ему путь.
Далее заходим в файл main.vue и устанавливаем router-view. Router-view работает как сцена. Он отображает компоненты, установленные с помощью router-link.
Теперь мы можем переключаться между тремя компонентами, нажимая три кнопки. Самое главное, что с помощью vue router мы можем сделать это элегантно. Наши коды ясны. Если вы хотите внести изменения, вы можете сделать это легко.
Теперь мы знаем, как настроить рабочий роутер. Но наше исследование роутера еще не закончено.
Заходим в файл router.js и находим постоянные маршруты.
В настоящее время каждый элемент массива имеет два свойства. Давайте добавим новый: name. Вы должны убедиться, что каждое имя уникально.
Имя может заменить путь в router-link.
Заходим в файл navi.vue и заменяем путь именем.
Но перед до вам нужно добавить двоеточие.
Двоеточие здесь на самом деле представляет собой директиву v bind.
Значение, которое мы присваиваем свойству to, должно быть объектом.
Внутри объекта мы устанавливаем свойство name.
Таким образом, нам больше не нужно указывать путь в теге ссылки маршрутизатора. Это может упростить поддержку нашей программы. Но не поймите меня неправильно, вам все равно нужно установить свойство path в js-файле router dot.
URL-адрес не только направляет вас в места, но и может переносить данные.
Итак, как мы отправляем данные с помощью маршрутизатора?
Отправка данных с помощью маршрутизатора называется динамическим маршрутизатором.
Чтобы использовать динамический маршрутизатор, выполните трехэтапную процедуру.
Объявите в router.js.
Назначьте значение в router-link.
Получить значение в компоненте с помощью $ route.
В router.js вы сначала находите свойство path. В конце его значения вы добавляете косую черту и двоеточие. После двоеточия вы добавляете имя свойства.
В router-link вы добавляете новое свойство: params. Params - это объект. Значение, которое вы хотите отправить, устанавливается внутри объекта.
Теперь сообщение msg: hello было отправлено в первый компонент. Итак, как мы получаем сообщение в первом компоненте?
Вам нужен $ route.params.msg.
Теперь сообщение msg можно передать в первый компонент.
В нашем уроке webpack мы узнали, как использовать отложенную загрузку для повышения эффективности программы.
Маршрутизатор Vue также поддерживает отложенную загрузку.
По сути, использовать отложенную загрузку в vue router очень просто. Все, что вам нужно сделать, это добавить функцию стрелки.
Наша следующая тема - вложенный маршрутизатор.
В папке компонента мы создаем новый файл компонента: child.vue.
Мы хотим отобразить child.vue внутри one.vue следующим образом:
Вложенный маршрутизатор может помочь нам в этом легко.
Сначала мы переходим к файлу one.vue и добавляем в него router-view. Он нужен нам для отображения child.vue.
Далее заходим в router.js.
Сначала мы импортируем child.vue.
Затем мы идем по постоянным маршрутам и находим элемент, контролирующий компонентный.
Мы добавляем новое свойство: children.
Его значение также является массивом. Каждый элемент массива - это объект.
Каждый объект - это правило маршрутизации.
Здесь мы устанавливаем путь к дочернему элементу, а компонент - к дочернему элементу. И это все.
Мы можем отобразить дочерний элемент внутри первого компонента, добавив дочерний элемент к URL-адресу.
Используя вложенный маршрутизатор, мы можем отображать один компонент внутри другого. Что, если мы хотим отобразить два компонента рядом?
Например, мы не хотим отображать дочерний элемент внутри компонента один, мы хотим отображать его под компонентом один.
В этом случае лучшим решением является просмотр именованного маршрутизатора.
Проще говоря, именованное представление маршрутизатора означает тег представления маршрутизатора с атрибутом имени.
Мы по-прежнему будем работать над первым компонентом.
Сначала мы удаляем свойство children.
Затем переключаем компонент на компоненты.
Внимание, на этот раз мы используем компоненты. Множественное число.
Ценность компонентов - это объект.
Прежде чем мы установим этот объект, нам нужно сначала перейти к файлу vue точки приложения.
Делаем копию тега просмотра роутера.
Во втором теге просмотра маршрутизатора мы добавляем атрибут name и устанавливаем его значение как child. Вы также можете выбрать другие имена.
Затем мы возвращаемся к файлу router dot js.
В компонентах мы сначала устанавливаем значение по умолчанию и устанавливаем для него постоянное значение. Это означает, что первый тег представления маршрутизатора будет отображать компонент один.
Затем мы устанавливаем дочерний элемент в качестве имени свойства и устанавливаем его значение для дочерней константы.
Это означает, что второй дочерний тег тега просмотра маршрутизатора будет отображать дочерний компонент.
Теперь путь / component_one может отображать два компонента рядом.
Ознакомьтесь с нашим ПОЛНЫМ курсом VueJS по Udemy:
Https://www.udemy.com/vuejs-for-students-with-zero-es6-foundation/?couponCode=MEDIUM_PROMO_1
