Question

我是vue.js的新手，并试图学习如何利用这个框架为我的API构建一个前端。我正在使用vue-admin主题，并且有一个带有一些导航链接的侧边栏，如下所示。

存储/模块/菜单/ index.js

const state = {
  items: [
    {
      name: 'Dashboard',
      path: '/dashboard',
      meta: {
        icon: 'fa-tachometer',
        link: 'dashboard/index.vue'
      },
      component: lazyLoading('dashboard', true)
    },
    charts,
    android,
  ]
}

然后，在与index.js相同的目录中，我有charts.vue和android.vue。

android.vue

import lazyLoading from './lazyLoading'

export default {
  name: 'Android',
  meta: {
    icon: 'fa-android',
    expanded: false
  },

  children: [
    {
      name: 'Jobs on Android',
      path: '/andr/android',
      meta: {
        label: 'android',
        link: 'android/Basic.vue'
      },
      component: lazyLoading('android/Basic')
    }
  ]
}

所以在我的侧边栏中，我现在有了＆＃39;仪表板＆＃39;图表＆＃39;和＆＃39; android＆＃39;。我无法弄清楚如何根据API请求动态创建侧边栏中的链接。 API请求将返回一个简单的列表，然后我想从列表中构建侧边栏链接。

我会将android.vue代码移回index.js并使用for循环创建每个链接吗？我猜测一切应该整合到一个index.js中吗？任何帮助将不胜感激。

Answer 1

您可以为菜单创建一个主要组件，该组件将负责获取商店中的所有链接并返回数组项

// Create this component ./main.vue
//file main.vue

import lazyLoading from './lazyLoading'

/* I presume you have a field named items in your store 
 and it has this architecture : 

items: [{ name: 'Dashboard',path: '/dashboard',meta: {
        icon: 'fa-tachometer',link: 'dashboard/index.vue'},
        component: "dashboard"},
        { name: 'chart',path: '/chart',meta: {
        icon: 'fa-chart',link: 'chart/index.vue'},
        component: "chart"}, ...etc]
*/  
var items = this.$store.state.items 

for (i in items) {
items[i].component = lazyLoading(items[i].component, true)
}

export default items;

然后，您可以导入main.vue并将其插入index.js

//file index.js

import items from "./main"

const state = {
  items:items
}

我还没有真正测试过，但我希望它会起作用，并会帮助你

如何在vue.js中创建动态侧边栏链接？

1 个答案: