router-link与vue和vuetify混淆

Question

如何使用vue-router使用该预定义模板:

https://vuetifyjs.com/examples/layouts/google-contacts

我在items对象中添加了一个链接

 items: 
[{ icon: 'dashboard' text: 'Home', link: '/'},

{ icon: 'dashboard' text: 'Account', link: '/account'},

我很困惑把路由器链接组件放在哪里.

Answer 1

v-list-tile,v-btn和v-card所有扩展router-link,因此您可以router-link直接在这些组件上使用任何属性.

在你的情况下,你可以使用 <v-list-tile :to="item.link">

Answer 2

我遇到了同样的问题，我是这样解决的：

<v-list-item v-else :key="item.text" link>
<!-- to -->
<v-list-item v-else :key="item.text" :to="item.link" link>


<v-list-item v-for="(child, i) in item.children" :key="i" link>
<!-- to -->
<v-list-item v-for="(child, i) in item.children" :key="i" :to="child.link" link>


JS

{ icon: "mdi-history", text: "Recientes", link: "/" },

不要忘记放入<router-view />容器中。

    <v-content>
      <v-container class="fill-height" fluid>
        <router-view />
      </v-container>
    </v-content>