В своих предыдущих историях я объяснил, как создать экспресс-сервер и стартовый комплект для приложения vue со многими восхитительными функциями. В этой статье давайте посмотрим, насколько легко интегрировать и использовать vue-router.
Посмотрите, например, проект this GitHub
Предварительные требования
Начнем !!
Я предполагаю, что мы готовы с нашим предварительным условием, указанным выше (если нет, это нормально, просто прочтите, чтобы понять, как реализовать vue-router)
vue-router: Vue Router является официальным маршрутизатором для Vue.js, мы также можем обрабатывать маршруты на стороне сервера с помощью hapi.js, однако vue-router очень похож на реакцию -router, и если у вас есть фон React, это просто кусок пирога.
Мне лично нравится vue-router за его функции, такие как вложенное сопоставление, поддержка эффектов перехода, простая настройка компонентов для каждого маршрута, а также его очень легко и просто реализовать. Посмотрим, как это работает.
Шаг 1. Установите vue-router (установка vue router уже произведена, если вы ссылаетесь на мою предыдущую статью)
npm i vue-router
Шаг 2. Давайте создадим два простых компонента vue, HelloWorld.vue и HelloAgain.vue.
Шаг 3. Создайте папку маршрутизатора и получите файл index.js, в котором определены маршруты для компонентов.
Мы импортируем vue-router, сообщая Vue, что мы будем использовать это определение маршрутизации, а затем просто определяем шаблон маршрута внутри массива routes. Это так просто.
Примечание: Хотите узнать больше о вариантах конструкции маршрутизатора?
Шаг 4. Интеграция маршрута в ваше приложение Vue
Мы все настроены, у нас есть наши компоненты, четко определенный маршрутизатор, и позвольте нам указать нашему приложению использовать их в нашем файле main.js
Всего два шага, импортируйте свой маршрутизатор и добавьте маршрутизатор в свой экземпляр vue. Вот и все. мы готовы обслуживать приложение и посмотреть, работает ли эта маршрутизация
Шаг 5. Запустите приложение и проверьте, работает ли vue-router.
npm run start
в браузере нажмите http: // localhost: 8080 /
Теперь попробуйте http: // localhost: 8080 / hello-again
Сопоставление динамического маршрута:
vue-router предоставляет возможность передавать параметры маршрута, и очень легко получить значение параметра и использовать его в своем компоненте. Например, если мы хотим отобразить подробную информацию о любых элементах списка и передать идентификатор выбранного списка в URL-адресе, например,
Http: // localhost: 8080 / привет-снова / 1
тогда мы можем добиться этого с помощью кода ниже
Просто добавьте : id в свойство path, а остальное обработайте в компоненте.
this.$route.params
Если вы хотите обрабатывать несколько динамических сегментов, ваш путь будет выглядеть так:
/hello-again/:id/username/:user
и ваш this. $ route.params будет
{ id: "1", user: "prashanth"}
for URL /hello-again/1/username/prashanth
Далее:
- Краткое введение в VueX и управление состоянием
- Рабочее приложение с данными cityOfChicago.org
Узнайте больше обо мне здесь
«Https://github.com/pn большая грудь
