title: Vue Router: Cannot read property 'forEach' of undefined at createRouterMatcher
body: <p>Trying to implement vue router. Getting the error:</p>
  <pre><code>Cannot read property 'forEach' of undefined
      at createRouterMatcher 
  </code></pre>
  <p>Vue Version: @vue/cli 4.5.9. I have two views/pages already formatted and ready to implement. My home page will be basically be the index.vue. Ive tried playing around with index.js and main.js but can't seem to get it to work.</p>
  <p>src/main.js</p>
  <pre><code>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')
  </code></pre>
  <p>src/router/index.js</p>
  <pre><code>import Index from '../views/index.vue'
  import About from '../views/about.vue'
  
  const routes =  [
      {
          path: &quot;/&quot;,
          name: &quot;Index&quot;,
          component: Index
      },
      {
          path:&quot;/about&quot;,
          name: &quot;About&quot;,
          component: About
      }
  ]
  
  export default routes;
  </code></pre>
  <p>src&gt;App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;router-view/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'App',
  }
  &lt;/script&gt;
  </code></pre>
  <p>Both my views index.vue &amp; about.vue both have <code>export default { name: 'pagename'}</code> accordingly</p>