Uncaught TypeError: routes.forEach is not a function

Question

Im new to Vue I am trying to get my routes working. I just need to go to my details page with the id of that article.

I've tried many tutorials but without success. (I installed routes manually after i made my project)

But I get an uncommon error. I didn’t find any solution.

(the error was found in the console of chrome)

Uncaught TypeError: routes.forEach is not a function

]1

//main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import '@babel/polyfill';
import 'mutationobserver-shim';
import './plugins/bootstrap-vue';
import App from './App.vue';
import routes from './routes';

Vue.use(VueRouter);
window.Vue = Vue; 

Vue.config.productionTip = false;
window.Vue = require('vue');

const router = new VueRouter({routes});

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

// routes.js

import Vue from 'vue';
import Router from 'vue-router';
import Homepage from './components/Homepage.vue';
import Details from './components/Details.vue';



Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'homepage',
      component: Homepage
    },
    {
      path: '/details',
      name: 'details',
      component: Details
    }
  ]

});

//homepage.vue

<template> 
 <div> <!-- You would have to wrap your list in another element (e.g., a div), making that the root: -->


 <div class="jumbotron">
   <form>
<span><strong>Choose your sections below.</strong></span><br>

 <div class="mt-3">
    <select v-model="section">
          <option v-bind:key="section.id" v-for="section in sections" :value="section">{{ section }}</option>
        </select>
    <div class="mt-3">Selected: <strong>{{ section }}</strong></div>
  </div>

  <div class="row mx-auto">
<div class="col-sm-12 col-md-6 col-lg-3 " v-bind:key="article.id"  v-for="article in articles"> <!--   to get records you must loop within the div with the for -->
<div>
   <b-card v-if="article.multimedia"  
    v-bind:title= "`${article.title}`" 
    v-bind:img-src="`${article.multimedia[0].url}`"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="my-4"
  >
  <b-badge> {{article.section}}</b-badge>
  <hr>
    <b-card-text>
  {{article.abstract}}
      </b-card-text>
    <router-link to="details"><b-button id="#detial_page" variant="primary">More info</b-button></router-link>

  </b-card>
</div>

</div>
  <Details v-bind:details="details"/>
</div>
</form>
</div>

</div>
 </template>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="lodash.js"></script>



<script>
 import Menu from './Menu.vue';
 import Details from './Details.vue';

 const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world"; // From NYTimes

 console.log("000");

 export default {
    name: "Homepage",
    components: {
      Menu,
      Details    
      },
    props: [
    "articles",
    "details",
    "results",
    ], data(){
      return{
selected: null,
    options: [
      { value: null, text: 'Please select a section' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Default Selected Option' },
          { value: 'c', text: 'This is another option' }
    ],
     sections: SECTIONS.split(','), //create an array of sections
      section: 'home', // set default sections to ""home"""
      }
    }


}
</script>

//App.vue


<template>
  <div id="app">

     <Menu/>
     <Homepage v-bind:articles="articles" />
     <router-view/>


  </div>
</template>




<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
import Menu from './components/Menu.vue';
import Homepage from './components/Homepage.vue';


import axios from 'axios';
 var url = 'https://api.nytimes.com/svc/topstories/v2/home.json?api-key=XXXXXXXX';

 export default {
  name: 'app',
  components: {
    Menu,
    Homepage
  }, 
  data(){
    return {
      articles: [], // empty array for the api records

    }
  },
   created(){
    axios.get(url) 
    //.then(res => this.movies = res.data)
    //.then(res =>console.log(res.data['results']) )
    .then(res => this.articles = res.data['results'])
    // get the Records form the API use Vue detected tool extention via chrome.
  }
}

</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>

Answer 1

It's router instance that is exported from routes.js, not routes:

export default new Router({...})

Then a new router instance is constructed in main.js with routes being router instance instead of an array of routes:

const router = new VueRouter({routes});

routes is not an array, so it doesn't have forEach method, like it's expected by Vue Router.

It should be:

...
import router from './routes'; // not routes

// this has been done in routes.js
// Vue.use(VueRouter);
// const router = new VueRouter({routes});

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