問題点

欠席回数をカウントできるアプリを作っているのですが、そこに設置しているナビゲーションメニューの"練習","検証"と書いてある部分をクリックすると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

vue
1   <v-list-item-title>
2            <router-link to="/about">{{ item.title }}</router-link>
3          </v-list-item-title>   
4        </v-list-item-content>
5      </v-list-item>
6      <router-view></router-view>
7</v-list>
8  </v-navigation-drawer>
9</template>
10
11<script>
12export default {
13  data() {
14    return {
15      items: [
16        { title: "練習", icon: "mdi-domain" },
17        {
18          title: "検証",
19          icon: "mdi-message-text"
20        }
21      ]
22    };
23  },

router/index.js

js
1import Vue from 'vue'
2import Router from 'vue-router'
3import About from '../views/About.vue'
4import App from '../App.vue'
5
6Vue.use(Router)
7
8export default new Router({
9    mode: 'history',
10    base: process.env.BASE_URL,
11    routes: [
12        {
13            path: '/',
14            name: 'app',
15            component: App
16        },
17        {
18            path: '/about',
19            name: 'about',
20            component: About
21        },
22    ]
23})

views/About.vue

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

問題が発生しているブランチの全コード

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

行動規範の内容に同意します

回答1件

ベストアンサー

遷移できない直接の原因は**7)**に記載している通り、main.jsでルーターを取り込んでいないからですが、ルーターを取り込むように修正すると別の原因（レイアウトやページ等）が発生して、やはり遷移できない状態です。

下記に遷移できるようにするまでの修正内容を記載していますが、遷移できない直接の原因だけ知りたい場合（その他の箇所の修正は自身で行いたい等）は、**2)と7)**の項目だけ見てください。

なお、どのような修正を行ったか把握できるように元のコードはコメントしていますが、基本的に不要なので削除可です。

修正内容

1) components/Count.vue

Count.vueの内容からコンポーネントというよりページ（ビュー）だと思いましたので、viewsへ移動させました。

components/Count.vue
  ↓
views/Count.vue

2) views/about.vue

ファイル名の先頭を大文字にします。（router/index.jsでimportできない原因です）

views/about.vue
  ↓
views/About.vue

3) router/index.js

App.vueはページではなくページのレイアウトなのでルーターから除外し、代わりに/にCountをマッピングします。

JavaScript
1import Vue from 'vue'
2import Router from 'vue-router'
3import About from '../views/About.vue'
4// Add
5import Countt from '../views/Count.vue'
6// Comment out
7//import App from '../App.vue'
8
9Vue.use(Router)
10
11export default new Router({
12    mode: 'history',
13    base: process.env.BASE_URL,
14    routes: [
15        {
16            path: '/',
17            // Comment out
18            // name: 'app',
19            // component: App
20            // Add
21            name: 'count',
22            component: Count
23        },
24        {
25            path: '/about',
26            name: 'about',
27            component: About
28        },
29    ]
30})

4) views/Count.vue

Count.vueはApp.vueの<router-view>に描画されるので、v-app、v-contentをコメントアウトしています。
なお、v-appはアプリケーション内で1つだけしか許されていません。

<template>
  <!-- Comment out -->
  <!-- <v-app> -->
    <!-- <v-content> -->
      <v-container>
        <v-row>
          <v-col cols="6">
            <v-text-field
              v-model="name"
              label="授業名"
              @keyup.enter="addTodo"
              @click="addTodo"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <v-card card_id width="348" class="mx-auto mb-5">
          <v-card-title>授業名を入力してください</v-card-title>
        </v-card>
        <div v-for="(todo,index) in todos" :key="todo.name">
          <v-card card_id max-width="344" class="mx-auto pt-6">
            <v-card-title>{{ todo.name }}</v-card-title>
            <v-card-text>
              <v-text-field label="メモ" v-model="todo.memo" @input="addMemo"></v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-btn @click="increment(todo)" color="primary">さぼり回数(+)</v-btn>
              <span>{{ todo.count }}</span>
              <v-btn @click="decrement(todo)" color="error">間違い(-)</v-btn>
              <v-btn @click="deleteItem(index)">削除</v-btn>
            </v-card-actions>
          </v-card>
        </div>
      </v-container>
  <!-- Comment out -->
    <!-- </v-content> -->
  <!-- </v-app> -->
</template>

5) components/SideNav.vue

v-navigation-drawerコンポーネントにappプロパティを追加します。
また、/のルーティングを修正したので合わせてnameを修正しています。

<template>
  <!-- <v-navigation-drawer v-model="$store.state.drawer" absolute temporary> -->
  <v-navigation-drawer v-model="$store.state.drawer" absolute temporary app>

  // 省略

 </v-navigation-drawer>
</template>

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

  // 省略

};
</script>

必須の修正ではありませんが、v-list-itemにexactプロパティを付加すると視認性が上がります。どのような違いがでるかはご自身でご確認ください。

<!-- <v-list-item v-for="item in items" :key="item.title" :to="item.link"> -->
<v-list-item v-for="item in items" :key="item.title" :to="item.link" exact>

  // 省略

</v-list-item>

6) App.vue

router-viewコンポーネントを配置します。ここにルーターで設定したページが描画されます。
SideNavはv-appの直下へ移動、またCountはrouter-viewで描画されるのでコメントアウトします。

<template>
  <v-app>
    <!-- Move -->
    <SideNav />
    <!-- <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>
      <v-content>
        <!-- Comment out -->
        <!-- <SideNav /> -->
        <!-- <Count /> -->
        <!-- Add -->
        <router-view></router-view>
      </v-content>
    <!-- </div> -->
  </v-app>
</template>

<script>
import { mapActions } from "vuex";
// Comment out
//import Count from "./components/Count";
import SideNav from "./components/SideNav";
export default {
  name: "App",
  components: {
// Comment out
//    Count,
    SideNav
  },
  methods: {
    ...mapActions(["toggleSideMenu"])
  }
};
</script>

7) main.js

ルーターが組み込まれていないので追加します。（遷移しない大本の原因です）

JavaScript
1import Vue from 'vue'
2import App from './App.vue'
3import vuetify from './plugins/vuetify'
4import store from './store'
5// Add
6import router from "./router";
7
8new Vue({
9  vuetify,
10  store,
11  // Add
12  router,
13  render: h => h(App)
14}).$mount('#app')

補足

Vuetifyでレイアウトを組む場合、レイアウトになるコンポーネント（この例ではApp.vue)では、レイアウトのアウトラインを定義します。
たとえば、ドロワー、バー、フッターを持つアウトラインは下記のようになります。
また、v-navigation-drawer、v-app-bar、f-footerコンポーネントが、このアプリケーションのコンポーネントであることを示すためにappプロパティを付加します。

<template>
  <v-app>
    <v-navigation-drawer app>
      <!-- ドロワーの記述 -->
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- アプリケーションバーの記述 -->
    </v-app-bar>

    <v-content>
      <router-view>
        <!-- ここにルーターで定義したコンポーネントが描画される -->
      </router-view>
    </v-content>

    <v-footer app>
      <!-- フッターの記述 -->
    </v-footer>
  </v-app>
</template>

Vuetifyアプリケーションの描画イメージ

App.vue
+-----------------------------------------------------------+
| <v-app-bar/>                                              |
+----------------+------------------------------------------+
| <v-navigation- | <v-content>                              |
|   drawer/>     |  <router-view>                           |
|                |                                          |
|                |                                          |
|                |                                          |
|                |  {{ ここにルーターで定義した }}            |
|                |  {{ コンポーネントが描画される }}          |
|                |                                          |
|                |                                          |
|                |                                          |
|                |   </router-view>                         |
|                | </v-content>                             |
+----------------+------------------------------------------+
| <v-footer/>                                               |
+-----------------------------------------------------------+

ルーティング

パスが/のときはviews/Count.vueがrouter-viewに、/aboutのときはviews/About.vueがrouter-viewに描画されます。