Как связать v-list-item с компонентом, используя роутер?

Question

Я использую Vuetify и не могу решить эту проблему. У меня <v-list> в моем <v-navigation-drawer>, который выглядит так:

SideDa sh. vue компонент

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

маршрутизатор /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

Приложение. 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>

Это довольно просто, и оно работало хорошо, пока я не добавил опора :to="item.route" для моего v-list-item. Это делает мой список полностью исчезающим. Я получаю навигационный ящик, в котором ничего нет, и я не могу понять, почему. Что мне здесь не хватает? Спасибо за вашу помощь

PS: Это может быть полезно, но когда я добавляю <router-view></router-view> в <v-content></v-content> моего приложения. vue, я получаю пустую страницу, даже без моей навигационной панели или навигационной панели. выдвижной ящик. Я чувствую, что это может произойти из-за моего роутера. Я проверил в своем пакете. json и у меня есть

"vue-router": "^3.1.3"

---

РЕДАКТИРОВАТЬ

Ну, я нашел ошибку ... это глупо. В файле main. js был отмечен комментарий import router from './router', например router inside new Vue(...). Я сохранил код, как он отображается здесь, и он работал.

Answer 1

Любые предложения относительно того, почему метод :to будет работать, но не метод @click?

Работает

<v-list-item 
   :to="item.route"
   v-else
   :key="i"
   link
>

Не работает 't

  <v-list-item 
    @click="$router({path: item.route})"
    v-else
    :key="i"
    link
  >

Answer 2

Приведенный выше код выглядит корректно, необходимо внести одно небольшое исправление в событие щелчка элемента v-списка @ click = "$ router ({path: item.route})"

items: [
                {icon: 'mdi-speedometer', title:'Dashboard', route:'/dashboard'},
                {icon: 'mdi-tools', title:'Tools', route:'/tools'}
            ],


<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
                    @click="$router({path: 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>