初学Vue，对着视频写，结果<router-view>嵌套页面没有反应

Question

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import Axios from "axios";
Vue.prototype.$axios = Axios;


Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App},
  template: '<App/>'
})

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from "../views/Main";
import index from "../views/index"
import Tables from "../views/Tables";
import App from "../App"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index',
      component:index
    }
  ]
})

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

index.vue

<template>
  <div id="index">
    <h1>为什么没有显示</h1>
  </div>
</template>

项目文件夹

我把routes第一个配置App.vue的时候，它又可以嵌套，放别的页面就是不行
求求各位大佬帮帮忙吧，找了几个小时了，还是没找到问题

Answer 1

https://blog.csdn.net/u011215281/article/details/78642801