Inertia-vue3中usePage().url返回ComputedRefImpl如何获取页面属性

@inertiajs/inertia-vue3 的 usePage() 返回值是 Vue3 的 ComputedRefImpl 类型计算属性引用，和所有 ref/computed 创建的响应式值规则一致：模板中会自动解包，但是 JS 逻辑上下文里必须通过 .value 属性才能拿到内部真实的 page 对象，直接点属性访问拿到的是计算引用实例本身，自然拿不到正确的 url 值。

不需要从模板传 $page 参数，直接在 script 里取值即可，修正后的完整代码：

<template>
  <a :class="isCurrent()">
    链接内容
  </a>
</template>

<script setup>
import { usePage } from '@inertiajs/inertia-vue3'

// 顶层调用一次拿到page引用即可，不用在函数里重复调用
const page = usePage()

const isCurrent = () => {
  // 关键：通过.value取计算属性内部的真实值
  const currentUrl = page.value.url
  console.log(currentUrl) // 这里打印出来就是正确的/comment
  // 这里写你的class判断逻辑即可，比如匹配当前路由返回active类名
  return currentUrl === '/comment' ? 'active' : ''
}
</script>

• 模板里直接写 $page.url 能正常用，是因为 Vue 模板默认会自动解包所有 ref 类型的响应式变量，不需要手动写 .value，这个规则只在模板上下文生效，<script setup> 里的原生 JS 逻辑没有这个特性。
• 如果要解构 page 里的属性，不要直接解构会丢失响应性，需要搭配 Vue 提供的 toRefs 使用：

  import { toRefs } from 'vue'
  const page = usePage()
  const { url, props } = toRefs(page.value)
  // 后续使用解构出来的属性时，同样需要加.value取值
  console.log(url.value)
  

内容的提问来源于stack exchange，提问作者Adam