Мне понравился метод 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).

Спасибо за прочтение!