Skip to main content
Commonmark migration
ソース リンク

階層

#階層
画像の説明をここに入力

windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"
プログラミング歴 5か月ほど
# 該当するコード
components

該当するコード

components/SideNav.vue

#全コード

全コード

#階層
画像の説明をここに入力

windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"
プログラミング歴 5か月ほど
# 該当するコード
components/SideNav.vue

#全コード

階層

画像の説明をここに入力

windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"
プログラミング歴 5か月ほど

該当するコード

components/SideNav.vue

全コード

ソース リンク

vue,vue-routerでうまくページ遷移できない

問題点

欠席回数をカウントできるアプリを作っているのですが、そこに設置しているナビゲーションメニューの"練習","検証"と書いてある部分をクリックするとAbout.vueに遷移したいです。vue-routerを使っているのですが、うまく遷移しないので良ければ何かアドバイスお願いしたいです。

#階層
画像の説明をここに入力

環境

windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"
プログラミング歴 5か月ほど
# 該当するコード
components/SideNav.vue

 
      <v-list-item v-for="item in items" :key="item.title" :to="item.link">
        <!-- v-list-item-actionは2.0系だとエラーになる -->
        <v-list-item-icon>
          <v-icon color="info">{{ 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>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { title: "練習", icon: "mdi-domain", link: { name: "about" } },
        {
          title: "検証",
          icon: "mdi-message-text",
          link: { name: "app" }
        }
      ]
    };
  },  

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '../views/About.vue'
import App from '../App.vue'

Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'app',
            component: App
        },
        {
            path: '/about',
            name: 'about',
            component: About
        },
    ]
})                                                                                                                                                                                                                                              

views/About.vue

<template>
  <p>aaaaa</p>
</template>

App.vue

<template>
  <v-app>
    <div>
      <v-app-bar app>
        <v-app-bar-nav-icon @click="toggleSideMenu"></v-app-bar-nav-icon>
        <v-toolbar-title class="headline text-uppercase">
          <span class="font-weight-light">Vacation Counter</span>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-tabs align-with-title background-color="transparent">
          <v-tab>本編</v-tab>
          <v-tab>雑談</v-tab>
          <v-tab>トーク</v-tab>
        </v-tabs>
      </v-app-bar>
      <SideNav />
      <Count />
    </div>
  </v-app>
</template>

<script>

#全コード

良ければ何か指摘していただけると助かります。