如何将Vuetify组件用作Inertia链接？

在Vuetify 3 + Inertia/Vue 1 + Vite 4项目里，用v-btn、v-card这类Vuetify组件的原生href属性做跳转，会触发页面全量重载，没法用Inertia的无刷新跳转功能。尝试用Inertia的Link组件的as属性指定Vuetify组件时多次失败，嵌套组件还会破坏Vuetify的样式结构。

正确使用Inertia Link的as属性 #

Inertia的Link组件的as属性需要传组件的引用，不是字符串或错误语法。具体操作如下：

1. 导入所需的Vuetify组件和Inertia的Link组件：

<script setup>
import { Link } from '@inertiajs/vue3'
import { VBtn } from 'vuetify/components'
</script>

2. 模板里直接把Vuetify组件对象传给as属性：

<Link :href="route('home')" :as="VBtn">
  Home
</Link>

这样会渲染出正确的<v-btn>组件，同时保留Inertia的无刷新跳转特性，不会破坏Vuetify的样式。

其他Vuetify组件（如v-card）的用法 #

对于v-card这类需要包裹内容的组件，用法完全一致，只要传入正确的组件引用即可：

<script setup>
import { Link } from '@inertiajs/vue3'
import { VCard, VCardTitle } from 'vuetify/components'
</script>

<template>
  <Link :href="route('post.show', post.id)" :as="VCard" class="cursor-pointer">
    <VCardTitle>{{ post.title }}</VCardTitle>
  </Link>
</template>

之前尝试失败的原因 #

• 用as="VBtn"时，会被解析成小写的<vbtn>标签，这不是Vuetify注册的组件，所以样式和功能都失效。
• 用as="{VBtn}"或as="{v-btn}"属于语法错误，as属性接收的是组件对象，不是字符串形式的表达式，因此会触发DOM创建失败的报错。

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