如何在 vuetify 组件上使用路由器链接"to"道具？

Question

我有一个化身图像，点击后我想转到我的一条路径。我知道我可以用路由器视图来实现，但vuetify也继承了它的属性。

缺少什么？：

<div id="app">
<v-app>
<v-app-bar>
<v-toolbar-items>
<v-avatar to="'/profile'">
<v-img src="http://www.dumpaday.com/wp-content/uploads/2019/10/00-156-750x280.jpg"></v-img>
</v-avatar>
</v-toolbar-items>
</v-app-bar>
</v-app>
</div>

完整示例：

https://codepen.io/toit123/pen/GRRmpqq

Answer 1

v-avatar不是链接，也不支持to，所以你必须用路由器链接来包装你的图像，比如：

<div id="app">
<v-app>
<v-app-bar>
<v-toolbar-items>
<router-link to="/profile">
<v-avatar>
<v-img src="http://www.dumpaday.com/wp-content/uploads/2019/10/00-156-750x280.jpg"></v-img>
</v-avatar>
</router-link>
</v-toolbar-items>
</v-app-bar>
</v-app>
</div>

---

或者你在v-avatar上添加一个自定义点击事件，并用类似的方法进行路由

<v-avatar @click="forward">

JS-

methods: {
forward() {
this.$router.push("/profile")
}
}