[Vuejs]-Vuetify sidebar menu click redirection to home page

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