如何在Quasar中实现点击HTML元素（如div）跳转至指定路由页面？

当然可以实现，以下是几种实用的方案：

推荐方案：用<router-link>包裹元素 #

Quasar基于Vue Router，直接用<router-link>将div包裹起来，用法和q-btn的to属性完全一致：

<router-link to="petInformation">
  <div>点击跳转至宠物信息页</div>
</router-link>

这种方式继承了Vue Router的所有原生特性，包括路由守卫、导航缓存、URL自动处理等，是最规范的实现方式。

备选方案：手动绑定点击事件调用路由API #

如果不想用<router-link>包裹，可以给div绑定点击事件，通过Vue Router的实例方法完成跳转：

选项式API写法 #

<template>
  <div @click="navigateToPetInfo">点击跳转至宠物信息页</div>
</template>

<script>
export default {
  methods: {
    navigateToPetInfo() {
      this.$router.push('petInformation')
    }
  }
}
</script>

组合式API写法（Vue 3 + Quasar） #

<template>
  <div @click="navigateToPetInfo">点击跳转至宠物信息页</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const navigateToPetInfo = () => {
  router.push('petInformation')
}
</script>

额外优化：添加可点击样式 #

为了让用户直观感知元素可点击，建议给div添加鼠标指针样式：

.clickable-element {
  cursor: pointer;
}

然后给目标div加上该类：

<div class="clickable-element" @click="navigateToPetInfo">点击跳转至宠物信息页</div>

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