vue TypeError: "_vm is undefined" 找不到问题在哪呀

Question

main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/router'


Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <app-header v-if="header_show"></app-header>
    <router-view v-on:header="header" v-on:footer="footer"></router-view>
    <app-footer v-if="footer_show"></app-footer>
  </div>
</template>

<script>
  import Header from "@/components/Header";
  import Footer from "@/components/Footer";

export default {
  name: 'App',
  data(){
    return{
      header_show:true,
      footer_show:true
    }
  },
  components: {
    'app-header':Header,
    'app-footer':Footer
  },
  methods:{
    //是否显示头部
    header:function (bool) {
      this.header_show=bool;
    },
    //是否显示尾部
    footer:function (bool) {
        this.footer_show=bool;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "@/components/Login";
import Index from "@/components/Index";

Vue.use(VueRouter);

const router=new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Index',
            components: Index
        },
        {
            path: "/login",
            name: 'Login',
            components: Login
        }]
})

export default router

Answer 1

参考GPT和自己的思路：

根据你提供的代码，可能的原因是在 router.js 中的路由配置中，components 应该为 component。因此，应该将路由配置改为如下所示：

const router=new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Index',
            component: Index
        },
        {
            path: "/login",
            name: 'Login',
            component: Login
        }]
})

如果问题还没有解决，可以提供更多信息帮助我们更好的理解问题。