未捕获的类型错误：routes.forEach不是一个函数。

Question

未捕获的类型错误：routes.forEach不是一个函数。

vue.jsroutesaxiosvue-router

3

我刚接触Vue，正在尝试使我的路由工作。我只需要通过文章的ID进入详细页面。

我尝试了许多教程，但都没有成功。（我在项目完成后手动安装了路由）

但是我遇到了一个不常见的错误，我找不到解决方法。

（这个错误在Chrome的控制台中被发现）

Uncaught TypeError: routes.forEach is not a function

error[![] ]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>

- arios_007

尝试移除额外的 window.Vue = require('vue');。这可能会通过将路由器绑定到另一个Vue实例来干扰你的设置。 - yuriy636

那没有做任何事情...感谢尝试。 - arios_007

也许是 routes.js 中多余的 Vue.use(Router); 吗？ - yuriy636

那也没有改变任何事情。 - arios_007

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Estus Flask · Accepted Answer

routes.js导出的是路由器实例（router instance），而不是路由（routes）：

export default new Router({...})

然后，在main.js中构建一个新的路由器实例，其中routes是路由器实例而不是路由数组。

const router = new VueRouter({routes});

routes不是一个数组，因此它没有像Vue Router期望的那样具有forEach方法。

应该改成:

...
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');