如何在Vuetify中以对象形式设置v-btn的href属性？

你提到的Vuetify支持的对象形式跳转，其实分两种场景，取决于你的项目是否集成了Vue Router：

一、项目集成了Vue Router（推荐） #

Vuetify的v-btn和Vue Router深度集成，:href可以直接接收路由对象，格式和$router.push()的参数一致，无需手动拼接URL。路由对象里用query字段传递查询参数，会自动转成?key=value的格式。

示例代码： #

方式1：用路由名称（更推荐，路径变化时不用改代码）

假设你在路由配置里，/forgot-password对应的路由名称是forgotPassword：

<v-btn
    class="secondary--text"
    x-small
    plain
    v-t="'components.login.forgot_password'"
    :href="{ name: 'forgotPassword', query: { rol: rol } }"
>
</v-btn>

方式2：直接用路径

如果不想用路由名称，也可以直接指定路径：

<v-btn
    class="secondary--text"
    x-small
    plain
    v-t="'components.login.forgot_password'"
    :href="{ path: '/forgot-password', query: { rol: rol } }"
>
</v-btn>

这种方式会自动处理参数的URL编码，避免手动拼接可能出现的错误。

二、项目未集成Vue Router #

如果是纯静态跳转，Vuetify的v-btn底层还是原生<a>标签，href只支持字符串，不能直接传URL对象。但你可以通过URL对象来构造正确的URL字符串，避免手动拼接：

示例代码： #

先在组件里定义生成URL的方法：

methods: {
  getForgotPasswordUrl() {
    const url = new URL('/forgot-password', window.location.origin);
    url.searchParams.set('rol', this.rol);
    return url.href;
  }
}

然后在按钮中调用：

<v-btn
    class="secondary--text"
    x-small
    plain
    v-t="'components.login.forgot_password'"
    :href="getForgotPasswordUrl()"
>
</v-btn>

补充说明 #

Vuetify文档里提到的“对象形式”，指的是Vue Router的路由对象，而非原生URL对象。只有在集成Vue Router的场景下，才能直接给:href传这种路由对象。

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