Vue路由器：无法在createRouterMatcher读取未定义的属性'forEach'答案

【问题标题】：Vue Router: Cannot read property 'forEach' of undefined at createRouterMatcherVue路由器：无法在createRouterMatcher读取未定义的属性'forEach'
【发布时间】：2021-06-11 17:07:58
【问题描述】：

尝试实现vue路由器。得到错误：

Cannot read property 'forEach' of undefined
    at createRouterMatcher

Vue 版本：@vue/cli 4.5.9。我有两个已格式化并准备实施的视图/页面。我的主页基本上是 index.vue。我尝试过使用 index.js 和 main.js，但似乎无法正常工作。

src/main.js

import { createApp } from 'vue'
import { routes } from './router/index'
import { createRouter, createWebHistory } from 'vue-router'
require('dotenv').config();
import App from './App.vue'
import './index.css'

let app = createApp(App)
let router = createRouter({
  history: createWebHistory(),
  routes,
})

app.use(router)

app.mount('#app')

src/router/index.js

import Index from '../views/index.vue'
import About from '../views/about.vue'

const routes =  [
    {
        path: "/",
        name: "Index",
        component: Index
    },
    {
        path:"/about",
        name: "About",
        component: About
    }
]

export default routes;

src>App.vue

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

<script>

export default {
  name: 'App',
}
</script>

我的观点 index.vue 和 about.vue 都有 export default { name: 'pagename'} 相应

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您使用的是默认导出，这意味着routes 不是命名导出，不应使用括号。这将解决问题：

import routes from './router/index'  // no brackets

但我建议在路由器文件中完成所有路由器设置并导出路由器而不是路由：

路由器/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/index.vue'
import About from '../views/about.vue'

const routes =  [
    {
        path: "/",
        name: "Index",
        component: Index
    },
    {
        path:"/about",
        name: "About",
        component: About
    }
]

let router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;

main.js

import { createApp } from 'vue'
import router from './router/index'
require('dotenv').config();
import App from './App.vue'
import './index.css'

let app = createApp(App)
app.use(router)
app.mount('#app')

【讨论】：