时间戳

首页 > 解决方案 > 如何使用 vvuetify v-icon vue router 打开新窗口？

vuetify.js - 如何使用 vvuetify v-icon vue router 打开新窗口？

问题描述

我正在尝试打开一个新页面，但它不能。当我点击我的主页图标时，它会打开我的主页，当我点击仪表板时，它会显示

仪表板“应用程序”已被删除，请改用“”。VToolbar> 在 src/components/Navbar.vue 在 src/App.vue

应用程序.vue

template>
        <nav>
            <v-toolbar flat app>
             <v-app-bar-nav-icon class="grey--text" @click="drawer =! drawer"></v-app-bar-nav-icon>
              <v-toolbar-title class="text-uparcase grey--text">
                  <span class="font-weighted-light">Blue</span>
                  <span>Berry</span>
              </v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn flat color="grey">
               <span>Home</span>
              </v-btn>
            </v-toolbar>
            <v-navigation-drawer v-model="drawer" app class="indigo">
          <v-list-item >
            <v-list-item-content>
            </v-list-item-content>
          </v-list-item>

          <v-divider></v-divider>

          <v-list
            dense
            nav
          >
            <v-list-item
              v-for="item in items"
              :key="item.title"
             router:to="item.route"
            >
              <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>
        </nav>
    </template>
    <script>
    export default {
        data() {
            return {
                drawer:false,
                 items: [
              { title: 'Dashboard', icon: 'mdi-view-dashboard',route:'/' },
              { title: 'Photos', icon: 'mdi-image',route:'/photos'},
              { title: 'Home', icon: 'mdi-home' ,route:'/home'},
              { title: 'About', icon: 'mdi-help-box' ,route:'/about'}
            ],
            right: null,
            }
        }
    }
    </script>

标签： vuetify.js

解决方案

尝试将每个 v-list 项嵌套在 < router-link />
中

<router-link :to="{ name: item.title }">
  <v-list-item>
    ...
  </v-list-item>
</router-link>

推荐阅读