How to go to a new route by clicking in a button in Vuetify?

问题

i'm a beginner in Vuetify , and I'm develloping my first application, and my question is : How by clicking on the "HEREEEEEEEEEEEEEEEEE" button in the navbar list the programm will route to a file called pass.vue (which is in the same folder ) ?

<template>
<div>
<v-toolbar
  dark
  prominent
  src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>

<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Workers</v-toolbar-title>

</v-toolbar>



<v-navigation-drawer app 
v-model="drawer" 
 class="deep-purple accent-4"
absolute
  bottom
  temporary>
           <v-list
                nav
                dense
            >
                <v-list-item-group
                v-model="group"
                active-class="deep-purple--text text--accent-4"
                >
                <v-list-item>
                    <v-list-item-icon>
                    <v-icon>mdi-account</v-icon>
                    <router-view/>
                    </v-list-item-icon>
                    <v-list-item-title router:to="/pass.vue">HEREEEEEEEEEEEEEEEEE</v-list-item-title>
                </v-list-item>

                <v-list-item >
                    <v-list-item-icon>
                    <v-icon>mdi-help</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Help</v-list-item-title>
                </v-list-item>

                <v-list-item >
                    <v-list-item-icon>
                    <v-icon>mdi-alarm</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Timetable</v-list-item-title>
                </v-list-item>



                </v-list-item-group>
            </v-list>
</v-navigation-drawer>

</div>
</template>

Thank you !

回答1:

I think you are confusing Vue with pure HTML. For Vue you need to use the Vue-Router library to create routes.
For Vuetify Components, or any components in general, remember that the :to creates a clickable link, so you would want to put it in a top level component which you want your user to click ex. <v-list-item> reather than v-list-item-title

Now for your particular case, your template should look like so:

<v-list-item v-for="(item,index) in items" :key="index" :to="{name: item.link}">
  <v-list-item-content>
    <v-list-item-title>
      {{ item.text }}
    </v-list-item-title>
  </v-list-item-content>
</v-list-item>

Followed by:

...
data(){
 return{
  items:{
  text: 'HEREEEEEEEEEEEEEEEEE',
  link: 'pass' // this will be a named router link
 }
}
...

Now in a seperate file for your router, which if you add using the vue-cli (recommended) will be created and called router.js, add the following

        {
            path: '/pass',
            name: 'pass', // same as passed in component
            component: () => import('@/path/to/file/pass.vue')
        }

Now, this ,ight be overwhelming at first, but it's actually very easy. I recommend you checkout Vue-Router's Documentation before you get back to it.

回答2:

Instead of item title you can use :to in v-list-item and name must be same as defined in your routes.

        <v-list-item :to="{name:'pass'}">
          <v-list-item-title>HEREEEEEEEEEEEEEEEEE</v-list-item-title>
        </v-list-item>

回答3:

I do it in this way, note that I use :to on v-list-item instead of v-list-item-title.

<v-list-item v-for="item in items" :key="item.text" :to="item.link">
  <v-list-item-action>
    <v-icon>{{ item.icon }}</v-icon>
  </v-list-item-action>
  <v-list-item-content>
    <v-list-item-title>
      {{ item.text }}
    </v-list-item-title>
  </v-list-item-content>
</v-list-item>

Example of item.link

// url
:to="/profile"

// path of Location obj
:to="{ path: '/profile' }"

// a more detail Location obj
:to="{ name: 'profile2', params: { userId: 123 }}"

You can either pass a string url to :to or a Location. Make sure you've declare this route in your router like below:

const routes = [
  {
    path: '/profile',
    name: 'profile',
    component: Profile
  },
  {
    path: '/profile2/:userId',
    name: 'profile2',
    component: Profile2
  }
];

来源：https://stackoverflow.com/questions/60858645/how-to-go-to-a-new-route-by-clicking-in-a-button-in-vuetify

标签

Vue.js

vuetify.js