I am doing a vue.js project and used vuetify framework for UI part. Created a sidebar. I want to navigate to home screen once I click that home button. I tried but did not get anything. I want to navigate to my home screen when I click on the home button. I can try doing router outlet but it is dynamic and being updated as per the text and icon given below Below is my layout code:
<template>
<v-app>
<v-app-bar app></v-app-bar>
<v-card>
<v-navigation-drawer app
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn
icon
@click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
<v-main>
<v-container>
<router-view></router-view>
</v-container>
</v-main>
</v-app>
</template>
<script>
//import HelloWorld from './components/HelloWorld';
export default {
name: "App",
components: {
//HelloWorld,
},
data: () => ({
//
drawer: true,
items: [
{ title: "Home", icon: "mdi-home-city" },
{ title: "My Account", icon: "mdi-account" },
{ title: "Users", icon: "mdi-account-group-outline" },
],
mini: false,
}),
};
</script>
Add click event in v-list-item and call a method on this event and within the method push the path for relative path in router.
<v-list-item
v-for="item in items"
:key="item.title"
link
@click="routePage(item.title)"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
write a method like this
routePage(page) {
switch(page) {
case 'Home':
this.$router.push({ path: '/', query: {} });
break;
case 'My Account':
//
break;
case 'Users':
//
}
}
If you are using vue-router, you can pass an object or directly the route you want to go, by doing the following:
<template>
<v-app>
<v-app-bar app></v-app-bar>
<v-card>
<v-navigation-drawer
app
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn
icon
@click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
:to="item.to"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
<v-main>
<v-container>
<router-view></router-view>
</v-container>
</v-main>
</v-app>
</template>
<script>
//import HelloWorld from './components/HelloWorld';
export default {
name: "App",
components: {
//HelloWorld,
},
data: () => ({
//
drawer: true,
items: [
{ title: "Home", icon: "mdi-home-city", to: '/' },
{ title: "My Account", icon: "mdi-account", to: '/my-account' },
{ title: "Users", icon: "mdi-account-group-outline", to: 'users' },
],
mini: false,
}),
};
</script>
Also in case you have objects in the route to element you can convert the to prop to:
items: [
{ title: "Home", icon: "mdi-home-city", to: { path: '/' } },
{ title: "My Account", icon: "mdi-account", to: { route: 'my-account'} },
{ title: "Users", icon: "mdi-account-group-outline", to: { path: 'users' } },
],
In case you are using a different routing method, you will be able to use string only, then change to prop, to href