Tích hợp Vue: Tài liệu usePathname

Hàm usePathname trả về pathname của trình duyệt hiện tại đã được loại bỏ phân đoạn locale, dưới dạng một ComputedRef<string> của Vue. Điều này rất hữu ích khi xây dựng điều hướng nhận biết locale — ví dụ: để xác định mục điều hướng nào đang hoạt động — mà không cần phải cắt bỏ tiền tố locale một cách thủ công.

Nhập (Import) usePathname trong Vue

import { usePathname } from "vue-intlayer";

Tổng quan

usePathname tạo một computed ref trong Vue. Nó đọc window.location.pathname, loại bỏ tiền tố locale thông qua getPathWithoutLocale và cập nhật giá trị của nó mỗi khi trình duyệt kích hoạt sự kiện popstate (điều hướng quay lại/tiến tới). Giá trị này có thể được sử dụng trực tiếp trong các template Vue hoặc các hàm setup của bạn.

Cách sử dụng

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

Giá trị trả về

Hành vi

• Loại bỏ Locale: Cắt bỏ phân đoạn locale ở đầu URL (ví dụ: /vi/dashboard → /dashboard).
• Phản ứng (Reactive): Cập nhật giá trị vào mỗi sự kiện popstate (trình duyệt điều hướng quay lại / tiến lên).
• An toàn cho SSR: Trả về "" khi không có window.
• Dọn dẹp (Cleanup): Trình lắng nghe popstate được thêm vào ở phạm vi toàn cục (globally) khi khởi tạo và thường không yêu cầu dọn dẹp thủ công trên mỗi component, nhờ vào cách Vue quản lý vòng đời component.

Ví dụ

<script setup lang="ts">import { usePathname } from "vue-intlayer";const links = [  { href: "/dashboard", label: "Bảng điều khiển" },  { href: "/settings", label: "Cài đặt" },];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>

Liên quan

• useLocale — locale hiện tại + bộ chuyển đổi locale
• getPathWithoutLocale — tiện ích cốt lõi mà hook này đang sử dụng