Passing props (array) into a router-link path

Question

I'm trying to dynamically update a <router-link> path based on what view component it is used within. Below is the <router-link> that is looping through the compItems array which is populated by each view component.

<router-link :to="{ name: compItem.name, params: { compItems: compItem.router } }" class="cz-ds-view-related-comp" v-for="compItem in compItems" :key="compItem.name">
  <div class="related-comp_icon"><img class="related-comp_icon" :src="require('@/assets/home/icons/' + compItem.atomicIcon + '')" alt=""></div>
  <div class="related-comp_title"><h3>{{ compItem.name }}</h3> <img src="../../assets/home/icons/arrow-right.svg"></div>
</router-link>

export default {
  name: 'relatedSection',
  props: {
      compItems: {
          type: Array
      }
  }
}
</script>

Below is an example of a view component defining router.

data () {
  return {
    compItems: [
      { name: 'Links', atomicIcon: 'atom.svg', router: 'links'}, 
      { name: 'Form Elements', atomicIcon: 'atom.svg', router: 'form-elements'},
      { name: 'Avatars', atomicIcon: 'atom.svg', router: 'avatars'},
      { name: 'Badges', atomicIcon: 'atom.svg',  router: 'badges'}
    ]
  }
}

And this is the console error I'm getting.

Thanks in advance!

---

Edit:

Here's a snapshot of the router file:

const routes = [{
  path: '/',
  name: 'home',
  props: true,
  component: Home
}, {
  path: '/avatars',
  name: 'avatars',
  props: true,
  component: Avatars
}, {
  path: '/badges',
  name: 'badges',
  props: true,
  component: Badges
}, {
  path: '/buttons',
  name: 'buttons',
  props: true,
  component: Buttons
}, {
  path: '/breadcrumbs',
  name: 'breadcrumbs',
  props: true,
  component: Breadcrumbs
}, {
  path: '/form-elements',
  name: 'form-elements',
  props: true,
  component: FormElements
}, {
  path: '/icons',
  name: 'icons',
  props: true,
  component: Icons
},
 ...

Answer 1

The router's route definitions all have lowercase name properties. When you use a <router-link> to access them by name, you need to use an exact match, but your compItems have capitalized names.

Also, you are using route params in the link but none of your routes have any defined.

Here is a refactoring to make the code clearer and correct:

<template v-for="compItem in compItems">
  <router-link :to="{ name: compItem.name }" class="cz-ds-view-related-comp">
    <div class="related-comp_icon">
      <img class="related-comp_icon" :src="require('@/assets/home/icons/' + compItem.atomicIcon + '')" alt="">
    </div>
    <div class="related-comp_title">
      <h3>{{ compItem.title }}</h3>
      <img src="../../assets/home/icons/arrow-right.svg">
    </div>
  </router-link>
</template>

data () {
  return {
    compItems: [
      { title: 'Links', atomicIcon: 'atom.svg', name: 'links'}, 
      { title: 'Form Elements', atomicIcon: 'atom.svg', name: 'form-elements'},
      { title: 'Avatars', atomicIcon: 'atom.svg', name: 'avatars'},
      { title: 'Badges', atomicIcon: 'atom.svg',  name: 'badges'}
    ]
  }
}