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

Question

我是 Vue 新手，我正在努力让我的路线正常工作。我只需要使用该文章的 ID 进入我的详细信息页面即可。

\n\n

我尝试了很多教程但没有成功。（我在制作项目后手动安装了路线）

\n\n

但我遇到了一个不常见的错误。我没有\xe2\x80\x99找不到任何解决方案。

\n\n

（在chrome的控制台发现错误）

\n\n

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

\n\n

] 1

\n\n

//main.js\n\nimport Vue from \'vue\';\nimport VueRouter from \'vue-router\';\nimport \'@babel/polyfill\';\nimport \'mutationobserver-shim\';\nimport \'./plugins/bootstrap-vue\';\nimport App from \'./App.vue\';\nimport routes from \'./routes\';\n\nVue.use(VueRouter);\nwindow.Vue = Vue; \n\nVue.config.productionTip = false;\nwindow.Vue = require(\'vue\');\n\nconst router = new VueRouter({routes});\n\nnew Vue({\n   el: \'#app\',\n   router,\n  render: h => h(App),\n}).$mount(\'#app\');\n

\n\n

// routes.js\n\nimport Vue from \'vue\';\nimport Router from \'vue-router\';\nimport Homepage from \'./components/Homepage.vue\';\nimport Details from \'./components/Details.vue\';\n\n\n\nVue.use(Router);\n\nexport default new Router({\n  routes: [\n    {\n      path: \'/\',\n      name: \'homepage\',\n      component: Homepage\n    },\n    {\n      path: \'/details\',\n      name: \'details\',\n      component: Details\n    }\n  ]\n\n});\n\n

\n\n

\n//homepage.vue\n\n<template> \n <div> <!-- You would have to wrap your list in another element (e.g., a div), making that the root: -->\n\n\n <div class="jumbotron">\n   <form>\n<span><strong>Choose your sections below.</strong></span><br>\n\n <div class="mt-3">\n    <select v-model="section">\n          <option v-bind:key="section.id" v-for="section in sections" :value="section">{{ section }}</option>\n        </select>\n    <div class="mt-3">Selected: <strong>{{ section }}</strong></div>\n  </div>\n\n  <div class="row mx-auto">\n<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 -->\n<div>\n   <b-card v-if="article.multimedia"  \n    v-bind:title= "`${article.title}`" \n    v-bind:img-src="`${article.multimedia[0].url}`"\n    img-alt="Image"\n    img-top\n    tag="article"\n    style="max-width: 20rem;"\n    class="my-4"\n  >\n  <b-badge> {{article.section}}</b-badge>\n  <hr>\n    <b-card-text>\n  {{article.abstract}}\n      </b-card-text>\n    <router-link to="details"><b-button id="#detial_page" variant="primary">More info</b-button></router-link>\n\n  </b-card>\n</div>\n\n</div>\n  <Details v-bind:details="details"/>\n</div>\n</form>\n</div>\n\n</div>\n </template>\n\n<script src="https://unpkg.com/axios/dist/axios.min.js"></script>\n<script src="lodash.js"></script>\n\n\n\n<script>\n import Menu from \'./Menu.vue\';\n import Details from \'./Details.vue\';\n\n 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\n\n console.log("000");\n\n export default {\n    name: "Homepage",\n    components: {\n      Menu,\n      Details    \n      },\n    props: [\n    "articles",\n    "details",\n    "results",\n    ], data(){\n      return{\nselected: null,\n    options: [\n      { value: null, text: \'Please select a section\' },\n          { value: \'a\', text: \'This is First option\' },\n          { value: \'b\', text: \'Default Selected Option\' },\n          { value: \'c\', text: \'This is another option\' }\n    ],\n     sections: SECTIONS.split(\',\'), //create an array of sections\n      section: \'home\', // set default sections to ""home"""\n      }\n    }\n\n\n}\n</script>\n

\n\n

//App.vue\n\n\n<template>\n  <div id="app">\n\n     <Menu/>\n     <Homepage v-bind:articles="articles" />\n     <router-view/>\n\n\n  </div>\n</template>\n\n\n\n\n<script src="https://unpkg.com/axios/dist/axios.min.js"></script>\n<script>\nimport Menu from \'./components/Menu.vue\';\nimport Homepage from \'./components/Homepage.vue\';\n\n\nimport axios from \'axios\';\n var url = \'https://api.nytimes.com/svc/topstories/v2/home.json?api-key=XXXXXXXX\';\n\n export default {\n  name: \'app\',\n  components: {\n    Menu,\n    Homepage\n  }, \n  data(){\n    return {\n      articles: [], // empty array for the api records\n\n    }\n  },\n   created(){\n    axios.get(url) \n    //.then(res => this.movies = res.data)\n    //.then(res =>console.log(res.data[\'results\']) )\n    .then(res => this.articles = res.data[\'results\'])\n    // get the Records form the API use Vue detected tool extention via chrome.\n  }\n}\n\n</script>\n\n<style>\n#app {\n  font-family: \'Avenir\', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>\n

\n

Answer 1

它是从 导出的路由器实例routes.js，而不是路由：

export default new Router({...})

然后用路由器实例而不是路由数组构造一个新的路由器main.js实例routes：

const router = new VueRouter({routes});

routes不是一个数组，所以它没有forEach方法，就像 Vue Router 所期望的那样。

它应该是：

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