0

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

問題点

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

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

画像の説明をここに入力

該当するソースコード

App.vue

      <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>

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>
   @@@@@@@

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

1 件の回答 1

1

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

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')

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。