

# 問題点

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

# 階層

[![画像の説明をここに入力](https://i.stack.imgur.com/Gq6Vj.png)](https://i.stack.imgur.com/Gq6Vj.png)

# 環境

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

#  該当するコード

components/SideNav.vue

[code]

     
          <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" }
            }
          ]
        };
      },  
    
[/code]

router/index.js

[code]

    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
            },
        ]
    })                                                                                                                                                                                                                                              
    
[/code]

views/About.vue

[code]

    <template>
      <p>aaaaa</p>
    </template>
    
[/code]

App.vue

[code]

    <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>
    
[/code]

# [全コード](https://github.com/masal9pse/courageTodo)

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


CC BY-SA 4.0
2019-12-17T15:12:18.337
61520
2019-12-17T15:12:18.337
2020-06-17T08:14:45.997
-1
36424
question
javascript vue.js
vue,vue-routerでうまくページ遷移できない