vue.js - 未捕获的类型错误:routes.forEach 不是函数
问题描述
我是 Vue 的新手,我正在努力让我的路线正常工作。我只需要使用那篇文章的 ID 转到我的详细信息页面。
我尝试了很多教程,但没有成功。(我在制作项目后手动安装了路线)
但我得到一个不常见的错误。我没有找到任何解决方案。
(错误是在chrome的控制台中发现的)
未捕获的类型错误: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-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>
解决方案
它是从中导出的路由器实例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');
推荐阅读
- typescript - 如何在 Vue 组件的数据中捕获 typescript 类型错误?
- matlab - 轮廓中缺少刻度
- node.js - AWS Lambda 上的 Nestjs(无服务器框架)| 如何访问事件参数?
- reactjs - Toastify 渲染不正确
- angularjs - 如何使用 Angular 模型构建 Kendo Grid
- mongodb - 如何更改所有现有集合和新集合的 mongodb 排序规则
- python - best_divisor() 函数的递归算法是什么?
- flutter - 当我调用警报对话框并且我在颤动的上下文屏幕中选择一种机器人更新的语言时,我无法更新语言变量值
- regex - 如何使用 REGEXP_EXTRACT (BigQuery) 从字符串中提取特定文本?
- outlook - 来自 Outlook 插件的 UpdateItem EWS 调用的内部服务器错误