Блог

Я пытаюсь динамически обновлять <router-link> путь в зависимости от того, в каком компоненте представления он используется. Ниже приведен <router-link> цикл, проходящий через compItems массив, который заполняется каждым компонентом представления.

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

Ниже приведен пример компонента представления, определяющего маршрутизатор.

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

И это ошибка консоли, которую я получаю.

Заранее спасибо!

Редактировать:

Вот снимок файла маршрутизатора:

 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
},
 ...
 

Все определения маршрутов маршрутизатора имеют name свойства нижнего регистра. Когда вы используете a <router-link> для доступа к ним по имени, вам нужно использовать точное совпадение, но ваши compItems имена написаны с заглавной буквы.

Кроме того, вы используете параметры маршрута в ссылке, но ни один из ваших маршрутов не определен.

Вот рефакторинг, чтобы сделать код более понятным и правильным:

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