Vue新手路由配置报错：Uncaught TypeError: routes.forEach is not a function

Hey there! Let's break down what's going wrong and fix this step by step.

First, that routes.forEach is not a function error is happening because you're passing a Vue Router instance to the VueRouter constructor in main.js, instead of a plain routes array. Let's fix that first, then tackle the dynamic route for article details.

Step 1: Fix your routes.js export #

Right now you're exporting a fully initialized Router instance, but main.js expects just the routes array. Update routes.js like this:

// routes.js
import Homepage from './components/Homepage.vue';
import Details from './components/Details.vue';

// Export just the routes array, not a Router instance
export default [
  { path: '/', name: 'homepage', component: Homepage },
  // Add a dynamic segment :id to capture the article ID
  { path: '/details/:id', name: 'details', component: Details }
];

Step 2: Fix main.js to create the Router correctly #

Now that routes is an array, your main.js can properly initialize the VueRouter. I also cleaned up redundant code for you:

// 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);
Vue.config.productionTip = false;

// Now routes is the array we exported, so this works
const router = new VueRouter({ routes });

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

Step 3: Update the router-link to pass the article ID #

In your Homepage.vue, you need to modify the router-link to include the article's ID in the URL. Also, you're currently rendering the Details component directly in Homepage - you don't need that, because the router-view in App.vue will handle rendering the Details page when the route matches.

Update the relevant part of Homepage.vue:

<!-- Remove this line from Homepage.vue: <Details v-bind:details="details"/> -->

<!-- Fix the router-link to pass the article ID -->
<router-link :to="`/details/${article.id}`">
  <b-button variant="primary">More info</b-button>
</router-link>
<!-- Or use the object syntax for better readability: -->
<!-- <router-link :to="{ name: 'details', params: { id: article.id } }"> -->

Step 4: Access the article ID in the Details component #

In your Details.vue, you can get the article ID from the route params using this.$route.params.id. For example, if you want to fetch or display the article details:

// Details.vue script
export default {
  name: 'Details',
  mounted() {
    // Get the article ID from the route
    const articleId = this.$route.params.id;
    console.log('Article ID:', articleId);
    // Now you can use this ID to fetch the full article data, etc.
  }
}

Bonus: Clean up App.vue #

Your App.vue is already rendering router-view, which is correct - that's where the Homepage and Details components will be swapped in/out based on the route. You don't need to render Homepage directly here anymore, because the default route (/) will load it via the router. Since you're passing articles from App.vue to Homepage, we can adjust the Homepage to pull that data from the root component:

Update App.vue template

<template>
  <div id="app">
    <Menu/>
    <!-- Remove this line: <Homepage v-bind:articles="articles" /> -->
    <router-view/>
  </div>
</template>

Update Homepage.vue to access root data

// Homepage.vue script
export default {
  name: "Homepage",
  components: { Menu }, // Remove Details from components list
  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(','),
      section: 'home',
    }
  },
  computed: {
    // Get articles from the root App component
    articles() {
      return this.$root.$data.articles;
    }
  }
}

That should fix the routes.forEach error and get your dynamic article detail pages working! Let me know if you hit any other snags.

内容的提问来源于stack exchange，提问作者arios_007