router-link with vue and vuetify confusion - vue-router

Question

How to use vue-router with using that predefined template:
https://vuetifyjs.com/examples/layouts/google-contacts
I have added a link in my items object
items:
[{ icon: 'dashboard' text: 'Home', link: '/'},
{ icon: 'dashboard' text: 'Account', link: '/account'},
I am confused where to put the router-link component.

Answer 1

v-list-tile, v-btn, and v-card all extend router-link, so you can use any of the router-link attributes directly on those components instead.
In your case you can just use <v-list-tile :to="item.link">

Answer 2

I had the same problem, and I solved it like this:
<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: "/" },
Don't forget to put <router-view /> in the container.
<v-content>
<v-container class="fill-height" fluid>
<router-view />
</v-container>
</v-content>

Answer 3

An example:
<template>
<v-navigation-drawer
app
clipped
permanent
expand-on-hover
>
<v-list>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-list-item link>
<v-list-item-content>
<v-list-item-title class="title">Sandra Adams</v-list-item-title>
<v-list-item-subtitle>sandra_a88#gmail.com</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list
nav
dense
>
<v-list-item v-for="(item, i) in items" :key="i" :to="item.link" link>
<v-list-item-icon>
<v-icon>{{item.icon}}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{item.text}}</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
name: 'MenuDrawer',
data: () => ({
items: [
{
icon: 'mdi-folder',
text: 'Home',
link: '/',
},
{
icon: 'mdi-account-multiple',
text: 'Starred',
link: 'https://github.com/vuetifyjs/vuetify',
},
{
icon: 'mdi-star',
text: 'About',
link: '/about',
},
],
}),
};
</script>

Answer 4

I had a similar task to achieve and I was able to do it in the following way.
See the following code below.
<v-list-item v-for="([icon, text, link], i) in items"
:key="i"
link
#click="$vuetify.goTo(link)" >
<v-list-item-icon class="justify-center">
<v-icon>{{ icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="subtitile-1">{{
text
}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
As per the documentation as we specify the link prop in the item it will be considered as an href to perform navigation.
Then you can make use of the click function and pass the parameter link inside it.