Vue Integration: usePathname Documentation

usePathname फ़ंक्शन वर्तमान ब्राउज़र पथनाम (pathname) को locale खंड हटाकर Vue ComputedRef<string> के रूप में लौटाता है। यह locale-जागरूक नेविगेशन बनाने के लिए उपयोगी है — उदाहरण के लिए, यह निर्धारित करना कि कौन सा नेव आइटम सक्रिय है — बिना locale उपसर्ग को मैन्युअल रूप से हटाए।

Vue में usePathname आयात (Import) करना

import { usePathname } from "vue-intlayer";

अवलोकन (Overview)

usePathname एक Vue कंप्यूटेड रेफ (computed ref) बनाता है जो window.location.pathname को पढ़ता है, getPathWithoutLocale के माध्यम से locale उपसर्ग हटाता है, और जब भी ब्राउज़र popstate इवेंट (बैक/फ़ॉरवर्ड नेविगेशन) फायर करता है, तो अपने मान को अपडेट करता है। इस मान को सीधे आपके Vue टेम्प्लेट (templates) या सेटअप फ़ंक्शंस (setup functions) में उपयोग किया जा सकता है।

उपयोग (Usage)

<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>

रिटर्न वैल्यू (Return Value)

व्यवहार (Behavior)

• Locale stripping: शुरुआत के locale खंड को हटाता है (उदा. /hi/dashboard → /dashboard)।
• Reactive: हर popstate इवेंट (ब्राउज़र बैक / फॉरवर्ड नेविगेशन) पर मान को अपडेट करता है।
• SSR-safe: window उपलब्ध न होने पर "" लौटाता है।
• Cleanup: popstate श्रोता (listener) इनिशियलाइज़ेशन पर विश्व स्तर पर (globally) जोड़ा जाता है और Vue द्वारा जीवनचक्र (lifecycle) को प्रबंधित करने के तरीके के कारण आमतौर पर प्रति-घटक (per-component) मैन्युअल क्लीनअप की आवश्यकता नहीं होती है।

उदाहरण (Example)

<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>

संबंधित (Related)

• useLocale — वर्तमान locale + locale स्विचर
• getPathWithoutLocale — इस हुक द्वारा उपयोग की जाने वाली अंतर्निहित उपयोगिता