Question

我有一个头像图片，点击后我想转到我的其中一条路径。我知道我可以使用router-view来做到这一点，但是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不是链接abd不支持to，因此您必须使用路由器链接来包装图像，例如：

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

或者您可以在v头像上添加自定义click事件，并采用类似方法

进行路由

<v-avatar @click="forward">

JS

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

如何在vuetify组件上使用router-link“ to”道具？

1 个答案: