Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту
Історія версій
- "Додано утиліту usePathname"v10.0.023.06.2026
- "Ініціалізація історії"v8.2.022.06.2026
Вміст цієї сторінки перекладено за допомогою штучного інтелекту.
Переглянути останню версію оригінального вмісту англійськоюIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Інтеграція з Vue: Документація usePathname
Функція usePathname повертає поточний шлях браузера (pathname) з видаленим сегментом локалі, як Vue ComputedRef<string>. Це корисно для створення навігації, що залежить від локалі — наприклад, щоб визначити, який елемент навігації є активним — без необхідності обробляти префікс локалі вручну.
Імпорт usePathname у Vue
Скопіюйте код у буфер обміну
import { usePathname } from "vue-intlayer";Огляд
usePathname створює Vue обчислюване посилання (computed ref), яке зчитує window.location.pathname, видаляє префікс локалі через getPathWithoutLocale і оновлює своє значення щоразу, коли браузер ініціює подію popstate (навігація назад/вперед). Це значення можна безпосередньо використовувати у ваших шаблонах Vue або функціях setup.
Використання
Скопіюйте код у буфер обміну
<script setup lang="ts">import { usePathname } from "vue-intlayer";const props = defineProps<{ href: string; label: string;}>();const pathname = usePathname();</script><template> <a :href="href" :aria-current="pathname === href ? 'page' : undefined"> {{ label }} </a></template>Значення, що повертається
Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані
| Тип | Опис |
|---|---|
ComputedRef<string> | Vue Computed Ref, що містить поточний шлях браузера (pathname) без префіксу локалі. |
Поведінка
- Видалення локалі (Locale stripping): Видаляє початковий сегмент локалі (наприклад,
/uk/dashboard→/dashboard). - Реактивність: Оновлює значення при кожній події
popstate(навігація браузера назад / вперед). - Безпека для SSR: Повертає
"", колиwindowнедоступний. - Очищення (Cleanup): Слухач події
popstateдодається глобально під час ініціалізації і зазвичай не потребує ручного очищення в кожному компоненті завдяки тому, як Vue керує життєвим циклом.
Приклад
Скопіюйте код у буфер обміну
<script setup lang="ts">import { usePathname } from "vue-intlayer";const links = [ { href: "/dashboard", label: "Дашборд" }, { href: "/settings", label: "Налаштування" },];const pathname = usePathname();</script><template> <nav> <a v-for="link in links" :key="link.href" :href="link.href" :style="{ fontWeight: pathname === link.href ? 'bold' : 'normal' }" > {{ link.label }} </a> </nav></template>Пов'язане
useLocale— поточна локаль + перемикач локаліgetPathWithoutLocale— базова утиліта, що використовується цим хуком