I am using Vuetify and I can't seem to solve this issue. I have a <v-list>
in my <v-navigation-drawer>
which looks like this :
SideDash.vue component
<template>
<v-navigation-drawer
v-model="drawer" clipped
:mini-variant.sync='mini'
width=240 absolute permanent
>
<v-list
flat dense nav class="py-1"
>
<v-list-item-group color='primary' mandatory>
<v-list-item
v-for="item in items"
:key="item.title"
dense
router :to="item.route"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-title>{{ item.title }}</v-list-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data() {
return {
drawer: true,
items: [
{icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},
{icon: 'mdi-tools', title:'Tools', route:'/tools'}
],
}
}
}
</script>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '@/views/Dashboard.vue'
import Tools from '@/views/Tools.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: '/tools',
name: 'tools',
component: Tools
}
]
const router = new VueRouter({
mode: 'history',
routes: routes
})
export default router
App.vue
<template>
<v-app>
<nav>
<Navbar/>
</nav>
<v-content>
<SideDash/>
</v-content>
</v-app>
</template>
<script>
import Navbar from './components/Navbar';
import SideDash from './components/SideDash'
export default {
name: 'App',
components: {
Navbar,
SideDash
},
data: () => ({
}),
};
</script>
This is rather simple, and it worked well until I added the prop :to="item.route"
to my v-list-item
. This makes my list completly disappear. I end up with a navigation-drawer with nothing in it and I can't figure out why. What am I missing here ? Thanks for your help
PS: This might be helpful, but when I add <router-view></router-view>
inside the <v-content></v-content>
of my App.vue, I get a blank page, without even my navbar or nav-drawer. I feel that it might come from my router set up. I checked in my package.json and I have it
"vue-router": "^3.1.3"
Well, I found the error... it's silly. In the file main.js the import router from './router'
was commented such as router
inside new Vue(...)
. I kept the code as it is displayed here and it worked.
Virtual routing and forwarding (VRF) is a technology included in Internet Protocol (IP) network routers that enables multiple instances of a routing table to exist in a virtual router and work simultaneously.
Instead of having one single outlet in your view, you can have multiple and give each of them a name. A router-view without a name will be given default as its name. A working demo of this example can be found here.
Any suggestions as to why the :to
method would work, but not the @click
method?
Works
<v-list-item
:to="item.route"
v-else
:key="i"
link
>
Doesn't
<v-list-item
@click="$router({path: item.route})"
v-else
:key="i"
link
>
Finally, I got this worked.
<v-list-item :key="i" link @click="$router.push({ path: item.route })">
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title class="grey--text">
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
source: https://router.vuejs.org/guide/essentials/navigation.html
they said: "clicking <router-link :to="...">
is the equivalent of calling router.push(...)
."
edited: use @click="$router.push({ path: item.route }).catch(err => {})
if u don't wanna see "Error: Avoided redundant navigation to current location: "/about".
source: NavigationDuplicated Navigating to current location ("/search") is not allowed [vuejs]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With