Menu
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.
911
A router-link component renders an a tag by default (you can change that). Every time the route changes, either by clicking a link or by changing the URL, a router-link-active class is added to the element that refers to the active route, allowing you to style it.
But what if you want to redirect programmatically, without using an anchor tag at all? If you're using Vue Router you'll push the new URL onto the router in order to do a redirect: this. $router. push('www.yoursite.com/blog') .
We’ll combine the two, inserting the router view and router links into vuetify’s layout. The router view will live inside the <v-content> which is the main app content, and the router links will stay in the <v-toolbar>. That’s it, check your localhost to see the router buttons in action:
In Vue.js, you can create several views using the first-party library Vue Router. This router makes an association with a view to a URL. In this tutorial, you are going to learn how to add the Vue Router library, integrate it into your project, and create dynamically generated routes.
The router-link component creates an <a> tag that's configured to work correctly with Vue router. For example, given the below Vue code: Vue will render the below HTML. Note that <router-link> becomes a plain-old <a> tag.
We are using the ‘meta’ param from Vue Router and inside that creating an attribute called ‘breadCrumb’ which returns an array of objects. But when we need to receive params from the router, we can define a function to return it. This array will be injected into the v-breadcrumb component.
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">
98
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>
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>[email protected]</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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
