作者:
    Creation:2026-06-22Last update:2026-06-22

    Vue 集成：usePathname 文档

    usePathname 函数返回当前浏览器的路径名（pathname），并以 Vue ComputedRef<string> 的形式提供移除了 locale 片段后的路径名。这对于构建可感知 locale 的导航非常有用——例如，确定哪个导航项处于激活状态——而无需手动移除 locale 前缀。

    在 Vue 中导入 usePathname

    typescript
    import { usePathname } from "vue-intlayer";

    概览

    usePathname 创建一个 Vue 计算引用 (computed ref)，它读取 window.location.pathname，通过 getPathWithoutLocale 移除 locale 前缀，并且每当浏览器触发 popstate 事件（后退/前进导航）时自动更新其值。该值可以直接在你的 Vue 模板或 setup 函数中使用。

    用法

    src/components/NavItem.vue
    <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，包含不带 locale 前缀的当前路径名（pathname）。

    行为

    • Locale 剥离 (Locale stripping)：移除路径开头的 locale 片段（例如：/zh/dashboard → /dashboard）。
    • 响应式 (Reactive)：在每次 popstate 事件（浏览器后退 / 前进导航）时更新值。
    • SSR 安全 (SSR-safe)：当 window 不可用时返回 ""。
    • 清理 (Cleanup)：popstate 监听器在初始化时全局添加，由于 Vue 对生命周期的管理，通常不需要在每个组件中手动进行清理。

    示例

    src/components/Sidebar.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>

    相关内容

    vue-intlayer
    useRewriteURL