Мне понравился метод this.$router
для доступа к маршрутам и параметрам маршрутов из Vue Router с помощью API параметров. Это было здорово для циклического просмотра всех ваших маршрутов и их рендеринга в простом компоненте навигации или нижнего колонтитула. Но введите Vue 3 и Composition API: все полетело к чертям.
Возврат всех маршрутов
При обращении к маршрутизатору в API параметров мы можем использовать переменную экземпляра this.$router
и возвращать все маршруты с помощью this.$router.options.routes
. Но поскольку this
не относится к экземпляру объекта в Composition API, мы должны сделать это по-другому.
Чтобы получить ссылку на маршрутизатор в Composition API, Vue Router предоставляет нам метод useRouter()
; его необходимо импортировать, а затем присвоить константе в настройках.
Оттуда мы можем перебрать нашу переменную router
и получить все наши маршруты:
<script setup> import { useRouter } from 'vue-router' const router = useRouter(); </script> <template> <div> <nav> <div v-for="(route, index) in router.options.routes" :key="index"> <ul> <router-link :to="route.path"> <li>{{ route.name }}</li> </router-link> </ul> </div> </nav> </div> </template>
Получение текущего маршрута и параметров маршрута
Очень полезно иметь возможность обнаруживать или возвращать текущую страницу/маршрут и его параметры. Чтобы сделать это, нам снова нужно изменить наш подход с Vue 2/Options API. В API композиции мы должны использовать функцию Router useRoute()
, и, как и в случае с useRouter()
, мы импортируем ее, назначаем константе, а затем используем в шаблоне.
Если мы отобразим переменную location
ниже, мы вернем все параметры для текущего маршрута («/about»):
<script setup> import { useRoute } from 'vue-router' const location = useRoute(); </script> <template> <div> <p>{{ location }}</p> </div> </template> // renders "path": "/about", "name": "About", "params": {}, "query": {}, "hash": "", "fullPath": "/about", "matched": [ { "path": "/about", "name": "About", "meta": {}, "props": { "default": false }, "children": [], "instances": { "default": {} }, "leaveGuards": { "Set(0)": [] }, "updateGuards": { "Set(0)": [] }, "enterCallbacks": {}, "components": { "default": { "__name": "About", "__hmrId": "####", "__file": "/Users/user/projects/my-project/src/views/About.vue" } } } ], "meta": {} }
Затем, если мы хотим стилизовать или условно визуализировать элементы на основе текущего маршрута, мы можем использовать location
, чтобы дать нам эту возможность. Скажем, например, мы хотим изменить цвет фона меню на странице «О программе» на красный. Мы можем указать путь маршрута (или имя), и если он возвращает true
, мы добавляем условные стили (или классы):
Мы можем использовать тернарный оператор для проверки маршрута и применить стили, если они верны:
<nav :style="location.path === '/about' ? 'background: red' : ''"> [...] </nav>
Итак, для полного кода:
<script setup> import { useRoute, useRouter } from 'vue-router' const location = useRoute(); const router = useRouter(); </script> <template> <div> <nav :style="location.path === '/about' ? 'background: red' : ''"> <div v-for="(route, index) in router.options.routes" :key="index"> <ul> <router-link :to="route.path"> <li>{{ route.name }}</li> </router-link> </ul> </div> </nav> </div> </template>
Заключение
Хотя мне очень понравилась простая глобальная ссылка на $router
в API параметров, функции useRouter()
и useRoute()
довольно легко использовать с API композиции.
Прочтите эту замечательную статью, чтобы узнать больше о Vue Router с Vue 3 и Composition API.
Если вам понравился этот пост, не стесняйтесь поддержать мою работу, и не забудьте подписаться и проверить больше постов на моей средней домашней странице. Свяжитесь и получите больше информации на моем веб-сайте (созданном с помощью Vue 3, носителя rss2feed, Bootstrap 5 и GSAP).
Спасибо за прочтение!