目录结构

参照的视频
vue脚手架创建
a.vue

<template>
    <div>a</div>
</template>
<script>
</script>

b.vue

<template>
    <div>b</div>
</template>
<script>
</script>

c.vue

<template>
    <div>c</div>
</template>
<script>
</script>

index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const routes =[
    {path:'/a',component:()=>import('@/components/a.vue')},
    {path:'/b',component:()=>import('@/components/b.vue')},
    {path:'/c',component:()=>import('@/components/c.vue')}
]
const router=new Router({
    routes
})
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

<template>
  <div>
    
    <Header></Header>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './components/Header/'
import Footer from './components/Footer/'
export default {
  name: '',
  components: {
    Header,
    Footer
  }
}
</script>

<style>

</style>

保存代码,cmd执行npm run serve报错
Failed to mount component: template or render function not defined.
解决：给a.vue,b.vue,c.vue添加export default {};