

[前回の質問で貰ったアドバイスを参考にして](https://ja.stackoverflow.com/questions/61520/vue-vue-
router%E3%81%A7%E3%81%86%E3%81%BE%E3%81%8F%E3%83%9A%E3%83%BC%E3%82%B8%E9%81%B7%E7%A7%BB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84)、router-
viewを描画するだけのApp.vueの設計にしてやってみましたが、またまた遷移がうまくいかなかったので再び質問します。

# 問題点

App.vueのrouter-linkの"count"と"about"をクリックすると遷移するはずが出来ない。  
[ここのリンクからチェックできます](https://couragetodo.netlify.com/)

# 階層（前回と変更しています）

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

# 該当するソースコード

App.vue

[code]

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

router/index.js

[code]

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

[このブランチの全コード](https://github.com/masal9pse/courageTodo)

# エラー文

１つ目

[code]

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

２つ目

[code]

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

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


CC BY-SA 4.0
2019-12-18T05:43:57.753
61534
2019-12-19T07:28:05.477
2019-12-18T14:01:00.990
36424
36424
question
javascript vue.js
vue,vue-routerでうまくページ遷移できない２


純粋にmain.jsにルーターを読み込んでいませんでした。  
src/main.js

[code]

    import Vue from 'vue'
    import App from './App.vue'
    import vuetify from './plugins/vuetify';
    import store from './store';
    import router from './router';
    
    new Vue({
      vuetify,
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    
    
[/code]


CC BY-SA 4.0
2019-12-19T07:28:05.477
61576
2019-12-19T07:28:05.477
36424
61534
answer