Vue js3：如何在数组项目中添加路由器链接和图标

Question

我有一系列导航项，包括我已添加到我正在制作的仪表板中的侧边栏组件中的子导航。 我想为数组中的每个项目添加带有不同图标的路由器链接。我仍在努力思考如何做到这一点，我真的需要帮助。 下面是代码示例。

数组导航项

state: {

navigation: [
  
  {title: "Home"},
  
  {
    title: "Posts",
    poen: true,
    subnav:[
      {title: "Published"},
      {title: "Draft"},
      {title: "Trashed"},
    ]
  },

  {
    title: "Users",
    open: true,
    subnav:[
      {title: "Admins"},
      {title: "Authors"},
      {title: "Editors"},
      {title: "Subscribers"}
    ]
  },

]
},
getters: {

navigation: state => {
  return state.navigation
}



 },

侧边栏菜单项

<ul id="navigation">
<li v-for="(item, index) in navigation" :key="'item'+index">

    <div class="title" @click="item.open = !item.open">{{item.title}}</div>

    <Dropdown v-if="item.subnav" :list="item" />
</li>

下拉项目

<ul v-show="list.open">
<li v-for="(item, index) in list.subnav" :key="'item' +index">

    <div class="title" @click="item.open = !item.open">{{item.title}}</div>

    <Dropdown v-if="item.subnav" :list="item" />
</li>

所以最终，我想实现这样的目标：

Answer 1

您可以通过两种方式（或更多）来做到这一点：

1。您可以导入图标类并将其添加到对象数组中，以便稍后将其绑定到模板。

例如。 英雄图标和用法。

import { UserCircleIcon, ..otherIconsImaginary } from "@heroicons/vue/solid";


navigation: [ 
  {title: "Home", icon: UserCircleIcon},
  {title: "Posts",poen: true,icon: PostsIcon,
  subnav:[
    {title: "Published", icon: SomeOtherIcon},
    {title: "Draft", icon: DraftsIcon},
    {title: "Trashed", icon: TrashedIcon},
    ]
   }
  ]

然后在您的模板上将其绑定为组件

2。从任何地方导入图标，然后为所有对象定义图标类。

navigation: [
     { title: "Home", icon_class: "home-icon" }...
]

然后将其绑定为图像，如下所示：

<img :src="homeIcon" alt="" v-if="item.icon_class === 'home-icon'" />

PS：我认为你应该只使用状态来管理用户信息。此代码可以在布局中完成，因为您可以根据您的业务逻辑宽度为经过身份验证、未经身份验证、404 和其他页面拥有多个布局。