Estoy haciendo un proyecto vue.js y utilicé el marco vuetify para la parte de la interfaz de usuario. Creó una barra lateral. Quiero navegar a la pantalla de inicio una vez que haga clic en ese botón de inicio. Lo intenté pero no conseguí nada. Quiero navegar a mi pantalla de inicio cuando hago clic en el botón de inicio. Puedo intentar hacer una salida de enrutador, pero es dinámico y se actualiza según el texto y el ícono que se muestran a continuación. A continuación se muestra mi código de diseño:
<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>Agregue el evento de clic en v-list-item y llame a un método en este evento y dentro del método presione la ruta para la ruta relativa en el enrutador.
<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>escribir un método como este
routePage(page) { switch(page) { case 'Home': this.$router.push({ path: '/', query: {} }); break; case 'My Account': // break; case 'Users': // } }Si está utilizando vue-router, puede pasar un objeto o directamente la ruta que desea seguir, haciendo lo siguiente:
<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> Además, en caso de que tenga objetos en la ruta to elemento, puede convertir el a prop en:
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' } }, ], En caso de que esté utilizando un método de enrutamiento diferente, podrá usar solo una cadena, luego cambiar to prop, a href