How to go to a new route by clicking in a button in Vuetify? - vue.js

Question

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 !

Answer 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.

Answer 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>

Answer 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
}
];