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

Hàm usePathname trả về pathname của trình duyệt hiện tại với phần locale đã bị loại bỏ, dưới dạng một Svelte Readable<string> store. Nó hữu ích cho việc 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 loại bỏ tiền tố locale theo cách thủ công.

Import usePathname trong Svelte

import { usePathname } from "svelte-intlayer";

Tổng quan

usePathname tạo ra một Svelte readable store được khởi tạo từ window.location.pathname, loại bỏ tiền tố locale thông qua getPathWithoutLocale, và phát ra một giá trị mới mỗi khi trình duyệt kích hoạt sự kiện popstate (điều hướng quay lại/tiến lên). Đăng ký theo dõi (subscribe) bằng cú pháp $ trong các component.

Sử dụng

<script lang="ts">  import { usePathname } from "svelte-intlayer";  export let href: string;  export let label: string;  const pathname = usePathname();</script><a {href} aria-current={$pathname === href ? "page" : undefined}>  {label}</a>

Giá trị trả về

Hành vi

• Loại bỏ locale: Xóa bỏ phần locale ở đầu pathname (ví dụ: /vi/dashboard → /dashboard).
• Phản ứng (Reactive): Phát ra giá trị mới trên mỗi sự kiện popstate (điều hướng quay lại / tiến lên của trình duyệt).
• An toàn cho SSR: Trả về "" khi window không có sẵn.
• Dọn dẹp: popstate listener được loại bỏ tự động khi subscriber cuối cùng hủy đăng ký.

Ví dụ

<script lang="ts">  import { usePathname } from "svelte-intlayer";  const links = [    { href: "/dashboard", label: "Bảng điều khiển" },    { href: "/settings", label: "Cài đặt" },  ];  const pathname = usePathname();</script><nav>  {#each links as link}    <a      href={link.href}      style:font-weight={$pathname === link.href ? "bold" : "normal"}    >      {link.label}    </a>  {/each}</nav>

Các tài liệu liên quan

• useLocale — locale hiện tại + bộ chuyển đổi locale
• getPathWithoutLocale — tiện ích nền tảng được sử dụng bởi hook này