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

Posted 2023-02-22

【中文标题】未捕获的类型错误：routes.forEach 不是函数

【英文标题】：Uncaught TypeError: routes.forEach is not a function

【发布时间】：2020-05-25 00:42:06

【问题描述】：

我是 Vue 新手，我正在努力让我的路线正常工作。我只需要使用那篇文章的 id 转到我的详细信息页面。

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

但我得到一个不常见的错误。我没有找到任何解决方案。

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

未捕获的 TypeError：routes.forEach 不是函数

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

【问题讨论】：

尝试删除多余的window.Vue = require('vue');。将路由器绑定到另一个 Vue 实例可能会影响您的设置。

那没有做任何事情.. 感谢您的尝试

也许是 routes.js 中额外的Vue.use(Router);？

这也没有改变任何东西

【参考方案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');

【讨论】：

我尝试了您在此处列出的内容。不幸的是，它没有用。它说已经声明了***“路由器”。 (E011)jshint(E011) 解析错误：标识符“路由器”已被声明***

您的代码可能与我发布的不同，否则不会出现此类错误。应该没有const router。唯一的router 应该是import。

它没有用。将其调整为您的代码后出现此错误。 vue.js:485 [Vue 警告]：缺少必需的道具：“to”在 ---> at src/components/Homepage.vue at src/App.vue

vue.js:485 [Vue 警告]：渲染函数中的错误：“TypeError：无法读取未定义的属性 '_normalized'”，位于 ---> at src/ components/Homepage.vue 在 src/App.vue

此错误不存在，因为路由器之前未能初始化。我无法调试您的应用程序，因此无法解决可能出现的所有错误。但该错误意味着 <router-link> 在没有 to 属性的情况下使用，而它是必需的。尽管您发布的代码显示主页中有<router-link to="details">，但请仔细检查router-link 组件是否始终与to 一起使用。