前回の質問で貰ったアドバイスを参考にして、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>
@@@@@@@
エラー文の参考にして、コンポーネントを正しく登録したと自分では思うのですが、やはり遷移がうまくいきません。何度も申し訳ないですがアドバイス頂けると助かります。