Skip to main content
該当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-app-bar>
      <SideNav />
      <v-content>
        <div id="nav">
          <router-link to="/">count</router-link>|
          <router-link to="/about">about</router-link>|
          <router-view />
        </div>
      </v-content>
    </div>
  </v-app>
</template>@@@@@@

<script>
import { mapActions } from "vuex";

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

<style scoped>
#nav {
  padding: 30px;
  font-size: 20px;
  color: red;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
<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-app-bar>
      <SideNav />
      <v-content>
        <div id="nav">
          <router-link to="/">count</router-link>|
          <router-link to="/about">about</router-link>|
          <router-view />
        </div>
      </v-content>
    </div>
  </v-app>
</template>

<script>
import { mapActions } from "vuex";

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

<style scoped>
#nav {
  padding: 30px;
  font-size: 20px;
  color: red;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
      <v-content>
        <div id="nav">
          <router-link to="/">count</router-link>|
          <router-link to="/about">about</router-link>|
          <router-view />
        </div>
      </v-content>
 @@@@@@

<script>
import { mapActions } from "vuex";

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

<style scoped>
#nav {
  padding: 30px;
  font-size: 20px;
  color: red;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
ソース リンク

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

前回の質問で貰ったアドバイスを参考にして、router-viewを描画するだけのApp.vueの設計にしてやってみましたが、またまた遷移がうまくいかなかったので再び質問します。

問題点

App.vueのrouter-linkの"count"と"about"をクリックすると遷移するはずが出来ない。
ここのリンクからチェックできます

階層(前回と変更しています)

画像の説明をここに入力

該当するソースコード

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-app-bar>
      <SideNav />
      <v-content>
        <div id="nav">
          <router-link to="/">count</router-link>|
          <router-link to="/about">about</router-link>|
          <router-view />
        </div>
      </v-content>
    </div>
  </v-app>
</template>

<script>
import { mapActions } from "vuex";

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

<style scoped>
#nav {
  padding: 30px;
  font-size: 20px;
  color: red;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

router/index.js

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

Vue.use(Router)

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

このブランチの全コード

エラー文

1つ目

 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>
@@@@@@@@

2つ目

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>
   @@@@@@@

エラー文の参考にして、コンポーネントを正しく登録したと自分では思うのですが、やはり遷移がうまくいきません。何度も申し訳ないですがアドバイス頂けると助かります。