---
title: "脚本事件页面"
description: "了解如何向您的分析提供商发送页面事件。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/docs/guides/page-events"
last_updated: "2026-08-11T09:33:10.053Z"
---

Nuxt Scripts 提供了 [`useScriptEventPage()`](/docs/api/use-script-event-page) 组合式函数来解决这个问题。

分析脚本通常会在每次路由更改后发送一个事件。Nuxt 的 [`page:finish` 钩子](https://nuxt.com/docs/4.x/api/advanced/hooks#app-hooks-runtime) 会在页面的 Suspense 树解析完成后运行，但排队中的 head 更新可能仍处于等待状态。

[`useScriptEventPage()`](/docs/api/use-script-event-page) 会监听 `page:finish`，然后等待 Unhead 渲染 DOM（或等待 100 毫秒的回退时间）后，再读取 `document.title` 和路由的完整路径。其回调仅在浏览器中运行。

如果您在 Nuxt 发出初始 `page:finish` 之前注册该组合式函数，则首次回调会涵盖初始渲染。稍后注册则只会跟踪后续导航。

## 用法

传入一个回调函数，并将解析后的值发送到您的分析服务提供商：

```ts
const { proxy } = useScriptGoogleAnalytics()

useScriptEventPage(({ title, path }) => {
  // 在初始渲染和每次路由变更后触发
  proxy.gtag('event', 'page_view', {
    page_title: title,
    page_location: window.location.href,
    page_path: path,
  })
})
```