将道具（数组）传递到路由器链接路径

Posted 2023-02-23

【中文标题】将道具（数组）传递到路由器链接路径

【英文标题】：Passing props (array) into a router-link path

【发布时间】：2021-05-30 22:28:36

【问题描述】：

我正在尝试根据在其中使用的视图组件动态更新<router-link> 路径。下面是循环通过每个视图组件填充的compItems 数组的<router-link>。

<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 + '')" ></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
,
 ...

【参考方案1】：

路由器的路由定义都有小写的name属性。当您使用 <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 + '')" >
    </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'
    ]